1. //封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求
  2. //参数格式如下{
  3. // type:"get"/"post",
  4. // dataType:"json"/"jsonp",
  5. // url:"地址",
  6. // data:{key:value}
  7. // success:function(){
  8. // }
  9. // }
  10. //还需要一个跨域方法,可以访问远程服务器的数据
  11.  
  12. function myAjax(obj){
  13. var type = obj.type || "get";
  14. var dataType = obj.dataType || "json";
  15. var url = obj.url;
  16. var data = obj.data ||{};
  17. var success = obj.success;
  18. //把data拼接成字符串,dataStr就是参数字符串
  19. var dataStr = "";
  20. //key=key&com=com&on=flsjfsjdfdsf
  21. for(var key in data){
  22. dataStr+=key+"="+data[key]+"&"
  23. }
  24. dataStr = dataStr.slice(0,-1);
  25. if(dataType=="json"){
  26. var xhr = new XMLHttpRequest();
  27. if(type=="get"){
  28. xhr.open("get",url+"?"+dataStr);
  29. xhr.send(null);
  30. }else if(type=="post"){
  31. xhr.open("post",url);
  32. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  33. xhr.send(dataStr)
  34. }
  35. xhr.onreadystatechange=function(){
  36. if(xhr.status==200&&xhr.readyState==4){
  37. var json = xhr.responseText;
  38. json = JSON.parse(json);
  39. success(json);
  40. }
  41. }
  42. }else if(dataType=="jsonp"){
  43. //需要有一个函数名,这个函数名要保证不会重名
  44. var date = new Date();
  45. var cbname = "myJsonp"+date.getTime()+Math.random().toString().slice(2);
  46. //我们要把你传入success对应的函数,放在一个特定函数里面
  47. window[cbname]=function(data){
  48. success(data);
  49. //newScript.parentNode.removeChild(newScript);
  50. };
  51. //新建一个script标签,里面的src链接到的就是接口地址(包含参数);
  52. var newScript = document.createElement("script");
  53. if(dataStr==""){
  54. newScript.src = url+"&callback="+cbname;
  55. }else{
  56. newScript.src = url+"?"+dataStr+"&callback="+cbname;
  57. }
  58. document.body.appendChild(newScript);
  59. }
  60. }

封装一个类似jquery的ajax方法的更多相关文章

  1. 手动模拟一个类似jquery的ajax请求

    var $ = { parms:function(obj){ var str = ''; for(var k in obj){ str +=k+'='+obj[k]+'&'; } str = ...

  2. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  3. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  4. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  5. jQuery中ajax方法无法执行回调函数问题

    最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...

  6. 前端-jQuery的ajax方法

    https://www.cnblogs.com/majj/p/9134922.html 0.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascri ...

  7. 在jquery的ajax方法中的success中使用return要注意的问题

    jquery的ajax方法:在success中使用return:来结束程序的时候,结束的只是success这个方法,也就是说success中的return的作用范围只是success: 如果要想在su ...

  8. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  9. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

随机推荐

  1. axios获取后端数据

    axios向后端请求数据时,一直获取不到数据, 后来改成这样写获取到了数据 不是一个this,有人说用箭头函数就可以了.

  2. IOS ViewTable

    // //  ViewController.swift //  UITableView // //  Created by lanou on 16/11/7. //  Copyright (c) 20 ...

  3. ElasticSearch High Level REST API【3】Scroll 滚屏

    ES中提供了 FROM/SIZE 分页,但这种分页有性能瓶颈. Scroll会以间隔时间滚屏的方式返回全部的查询数据,可以作为数据量很大的情况下,分页的一个替代方案 完整的示例如下: public v ...

  4. 非负随机变量X满足:(1-F(x)) 在 (0,+∞)积分为= E[X]

    机器学习作业的第一题最后一问卡住了,要证明 非负随机变量X满足 1 - F(X) 在 (0,+∞)上的积分是E(X);  关键的地方是积分换序,看原来的答案真的很难理解,画个图一下就懂了,码个链接,便 ...

  5. 异步解决方案----Promise与Await

    前言 异步编程模式在前端开发过程中,显得越来越重要.从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题.随着ES6新标准的到来,处理异步数据流又有了新的方案.我们都知道,在传统的aja ...

  6. Table 分页处理

    介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables ...

  7. 16,Python网络爬虫之Scrapy框架(CrawlSpider)

    今日概要 CrawlSpider简介 CrawlSpider使用 基于CrawlSpider爬虫文件的创建 链接提取器 规则解析器 引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话, ...

  8. UVa 1455 Kingdom 线段树 并查集

    题意: 平面上有\(n\)个点,有一种操作和一种查询: \(road \, A \, B\):在\(a\),\(b\)两点之间加一条边 \(line C\):询问直线\(y=C\)经过的连通分量的个数 ...

  9. 【ansible】使用ansible安装nginx

    一.主机准备 ServerIP:10.10.10.102 ClientIP:  10.10.10.103,10.10.10.104 二.安装ansible yum -y install ansible ...

  10. Algorithms(fourth edition)——无向图

    1.设计图基本操作API 2.用什么数据结构来表示图并实现API 要求:(1)要预留足够空间 (2)实例方法实现要快 三个选择: 邻接矩阵:布尔矩阵,不满足条件一,而且无法表示平行边 边的数组:不满足 ...