异步(一)ajax 与 jquery.ajax的详解

ajax原生写法

一.get写法

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//创建对象 let xhr = new XMLHttpRequest() xhr.open('get',"url?name=&age=") //查询字符串 xhr.send(null) 请求体 xhr.onreadystatechange = function(){    if(xhr.readyState ===4)   {       if(xhr.status ===200)       {             console.log(xhr.responseText) //返回的响应内容       }    }  } <br>分析:<br>get有 请求行 xhr.open('get','url?name=&age=')<br>get有 请求头 可以忽略<br>get有 请求体 xhr.send(null)

　　

二.post写法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

let xhr = new XMLHttpRequest() xhr.open('post','url') xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') //固定写法,重点记忆 xhr.send('name=&age=') xhr.onreadystatechange = function(){   if(xhr.readyState ===4)   {       if(xhr.status ===200)       {           console.log(xhr.responseText) //返回的响应内容       }   }    } 分析:<br>post有 请求行 xhr.open('post','url')<br>post有 请求头 xhr.setRequestHeader('Content-Type','application/x-wwww-form-urlencoded')<br>post有 请求体 xhr.send('name=&age=')

　　

说明xhr.readyState 的几种状态

?

1 2 3 4 5

0 － （未初始化）还没有调用send()方法 1 － （载入）已调用send()方法，正在发送请求 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 3 － （交互）正在解析响应内容 4 － （完成）响应内容解析完成，可以在客户端调用了

 

说明xhr.status情况

 

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

 

jquery的ajax使用情况

一 .$.get()的使用

?

1 2	官方写法 $.get(URL,data,function(data,status,xhr),dataType)

 

?

1 2 3 4 5 6 7 8 9 10

案例: $("button").on("click", function () {           $.get(             "http:url...",             { name: "admin", pwd: "123456" },             function (data, status) {               alert("数据: " + data + "\n状态: " + status);             }           );         });

　　

参数	描述
URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： data - 包含来自请求的结果数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。 可能的类型： "xml" - 一个 XML 文档 "html" - HTML 作为纯文本 "text" - 纯文本字符串 "script" - 以 JavaScript 运行响应，并以纯文本返回 "json" - 以 JSON 运行响应，并以 JavaScript 对象返回 "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

　　

 二.$.post()的使用

?

1 2	官方写法 $(selector).post(URL,data,function(data,status,xhr),dataType)

 

?

1 2 3 4 5 6 7 8 9 10

案例 $("button").on("click", function () {           $.post(             "url",             { name: "admin", pwd: "123456" },             function (data, status) {               alert("数据: " + data + "\n状态: " + status);             }           );         });

　　

参数	描述
URL	必需。规定将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： data - 包含来自请求的结果数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。 可能的类型： "xml" - 一个 XML 文档 "html" - HTML 作为纯文本 "text" - 纯文本字符串 "script" - 以 JavaScript 运行响应，并以纯文本返回 "json" - 以 JSON 运行响应，并以 JavaScript 对象返回 "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

　　

 三 $.ajax的使用

 对比 : 比上面的两种的方法,可以执行更精确的执行控制

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$.ajax({      url:'',      type:'get/post'      data:{},      beforesend:function(){},      success:function(res){},      error:function(){},      complete:function(){} })   分析: url: 链接地址 type: 如果是get请求,可以不写 data: 若无条件,可以不写 beforesend:请求前处理,可以进行表单验证  不可以不写 success: 成功,res是后台响应的内容  error:失败 complete: 无论成功与失败,都会执行,可以进行loading的状态改变  可以不写

 

 

 

　　

ajax 中get 和post使用问题

使用get遇到的问题:

1.问题一. 缓存：当每次访问的url相同，客户端直接读取本地缓存里面的内容，即使后台数据变化前台也不会有变化；

解决方法：在？后面链接一个num=【随机数Math.random()】或者num=【时间戳new Date().getTime()】，'1.php?username="May"&'+num（这里没有变量名，避免和后台参数冲突）

2.问题二. 乱码，当传递中文或者特殊字符的时候，前台显示出现乱码

解决办法：使用编码encodeURI('蜗牛')

测试结果：通过使用Chrome测试，结果get的两种问题，都已经得到了解决       

使用post遇到的问题：

post方式，数据放在send()里面作为参数传递；

问题：当没有设置请求头的时候，后台直接不对数据进行处理；前台就无法获得后台返回的数据

解决方法：手动设置请求头（xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')），声明发送的数据类型

【注】post没有缓存问题，没有编码问题（因为在请求头里面已经进行了声明）

测试结果：通过使用Chrome测试，结果post这个没有声明头部信息，问题是存在的

参考资料来源 : https://www.cnblogs.com/liu-fei-fei/archive/2004/01/13/5624075.html

 

 

 

 

看到get请求会导致缓存,就在想为啥我的每次请求没有缓存呢,原因是什么,那么又该如何去解决

　

在FF，Chrome中使用jquery ajax请求得到的数据浏览器不会自动存储

因为jquery给他们加上一个类似于时间戳的特殊标识，使得每次都是不同的请求，
取新数据去缓存，缓存也就没有起作用。所以你即使给ajax参数cache设为true也没有作用。
（而IE和别的上述浏览器的缓存机制不一样，它不做添加啥都存，你想不用缓存都不行）。
另外jquery的这个cache参数（它默认值就是true...）只是控制它能控制范围内的缓存，
也就是false时不使用浏览器缓存而直接去请求url，而true的时候就使用缓存，这里它可能有点用词不当。
最后既然你想做异步的数据获取，如果你在缓存的环节直接控制死了cache，这样你是没办法得到原接口有了更新之后的数据的，
所以建议更好的方法是自己做本地存储（Web Storage），
只有存储到web storage API中才能稳定持久保存，
常见的浏览器本地存储有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb等，具体的用法请查相关资料。


分析:尝试写了一个原生的ajax请求,在ie中运行,发现可以实现缓存,但是后续还需要进一步探究

 

 

 

 

扩展内容

json:本质是字符串

注意点:

1/外面一定是 单引号 包裹

2/一定是键值对格式

3/键一定是字符串(用双引号)

4/若值是字符串(一定要用双引号)

5/不能包含undefined,函数

 

扩展:       

编码:

encodeURI() :若只含有中文,可以使用

encodeURIComponent() 若含有中文,还含有'$,?,&'等特殊符号可以进行编码   

解码:

decodeURI()

encodeURIComponent()