异步(一)ajax 与 jquery.ajax的详解
ajax原生写法
一.get写法
//创建对象
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) //返回的响应内容
}
}
}
分析:
get有 请求行 xhr.open('get','url?name=&age=')
get有 请求头 可以忽略
get有 请求体 xhr.send(null)
二.post写法
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) //返回的响应内容
}
}
}
分析:
post有 请求行 xhr.open('post','url')
post有 请求头 xhr.setRequestHeader('Content-Type','application/x-wwww-form-urlencoded')
post有 请求体 xhr.send('name=&age=')
说明xhr.readyState 的几种状态
0 － （未初始化）还没有调用send()方法 1 － （载入）已调用send()方法，正在发送请求 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 3 － （交互）正在解析响应内容 4 － （完成）响应内容解析完成，可以在客户端调用了
说明xhr.status情况
| 分类 | 分类描述 |
|---|---|
| 1** | 信息，服务器收到请求，需要请求者继续执行操作 |
| 2** | 成功，操作被成功接收并处理 |
| 3** | 重定向，需要进一步的操作以完成请求 |
| 4** | 客户端错误，请求包含语法错误或无法完成请求 |
| 5** | 服务器错误，服务器在处理请求的过程中发生了错误 |
jquery的ajax使用情况
一 .$.get()的使用
官方写法 $.get(URL,data,function(data,status,xhr),dataType)
案例:
$("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) | 可选。规定当请求成功时运行的函数。 额外的参数：
|
| dataType | 可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。 可能的类型：
|
二.$.post()的使用
官方写法 $(selector).post(URL,data,function(data,status,xhr),dataType)
案例
$("button").on("click", function () {
$.post(
"url",
{ name: "admin", pwd: "123456" },
function (data, status) {
alert("数据: " + data + "\n状态: " + status);
}
);
});
| 参数 | 描述 |
|---|---|
| URL | 必需。规定将请求发送到哪个 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数：
|
| dataType | 可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。 可能的类型：
|
三 $.ajax的使用
对比 : 比上面的两种的方法,可以执行更精确的执行控制
$.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()
