AJAX学习1

1.创建Ajax对象
var xhr=new XMLHttpRequest();
2.告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.example.com'); //get或者request地址
3.发送请求
xhr.send();
4.获取服务器端与客户端的相应数据
xhr.onload=function(){console.log(xhr.responseText)}
5.JSON.parse(); //将Json字符串转换为Json对象
6.get请求方式
xhr.open('get','http://www.aidneg.com')
7.POST请求方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//设置请求参数的类型
xhr.send('name=zhangsan&age=20')//发送请求
7.1请求参数的格式:
1.application/x-www-form-urlencoded
2.application/json //{name:'zhangsan',age:'20'}
在请求中指定Content-Type属性值为application/json,告诉服务器端当前请求参数的格式是Json;
JSON.stringify();//将Json对象转换为json字符串
8.Ajax状态码
在创建ajax对象,配置ajax对象,发送请求,以及接受完服务端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态码
0:请求未初始化(还没有调用open())
1:请求已经简历,但是还没有发送
2:请求已经发送
3:请求正在处理,通常相应中已经有部分数据
4:响应已经完成
xhr.readyState //获取Ajax状态码
获取服务器端的响应
onreadystatechange 事件 当Ajax状态码发生变化时将自动触发该事件。
xhr.onreadystatechange=function(){
console.log(xhr.readyState);
if(xhr.readState ==4){
console.log(xhr.resonseText);
}
}
9.Ajax错误处理
1.网络畅通,服务器能接收到请求,服务器端返回的结果不是预期结果。通过xhr.status获取http状态码
2.当网络中断时会触发onerr事件
10.Ajax封装
问题:发送一次请求代码过多,发送多次请求代码冗余且重复
解决方案:将请求代码封装到函数中,发请求时调用函数即可。
11.
xhr.getResponseHeader('Content-Type') //获取响应头中的数据
responseText =JSON.parse(responseText) //将json字符串转化为json对象
12. 采用模板引擎
1.将模板引擎的库文件引入到当前页面

2.准备art-template模板

13.Ajax中done,fail等方法
在 AJAX(Asynchronous JavaScript and XML)中,done 和 fail 是 jQuery 提供的方法,用于处理 AJAX 请求的成功和失败情况。这两个方法通常与 $.ajax() 函数或 jQuery 的其他 AJAX 快捷方式(如 $.get(), $.post() 等)一起使用。
done 方法

done 方法用于指定一个回调函数,当 AJAX 请求成功时(即 HTTP 状态码为 200 到 399 之间)会调用这个回调函数。你可以在这个回调函数中处理请求返回的数据。

示例:

javascript

$.ajax({
url: 'example.com/api/data',
type: 'GET',
dataType: 'json'
})
.done(function(data, textStatus, jqXHR) {
// 请求成功时执行的代码
console.log("请求成功!");
console.log(data); // 打印返回的数据
})
.fail(function(jqXHR, textStatus, errorThrown) {
// 请求失败时执行的代码
console.log("请求失败!");
console.log(textStatus); // 打印请求状态
console.log(errorThrown); // 打印异常信息

});

在上面的示例中,如果 AJAX 请求成功,done 方法中的回调函数会被调用,并接收三个参数:

data:服务器返回的数据(取决于 dataType 设置)。
textStatus:请求的状态描述字符串,例如 "success"jqXHR:一个包含请求相关信息的对象(jQuery XMLHttpRequest 对象)。

fail 方法

fail 方法用于指定一个回调函数,当 AJAX 请求失败时(即 HTTP 状态码为 400 或更高)会调用这个回调函数。你可以在这个回调函数中处理错误情况。

示例中的 fail 方法回调函数接收三个参数:

jqXHR:与 done 方法中的 jqXHR 相同,一个包含请求相关信息的对象。
textStatus:请求的状态描述字符串,例如 "error"。
errorThrown:捕获的异常对象(如果有的话)。

链式调用

done 和 fail 方法允许链式调用,这使得你可以在一个 AJAX 请求上添加多个成功或失败的处理程序。

javascript

$.ajax({ /* ... / })
.done(function() { /
第一个成功处理程序 / })
.done(function() { /
第二个成功处理程序 / })
.fail(function() { /
失败处理程序 */ });

posted @   天涯怂人  阅读(4)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示