视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ajax请求过程以及请求方法的讲解(代码示例)
2020-11-27 19:29:07 责编:小采
文档


本篇文章给大家带来的内容是关于ajax请求过程以及请求方法的讲解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。据小编了解到,ajax很早就有了,只不过那时候都不用它,后来谷歌把它用在谷歌地图上,人们感觉使用起来很方便,而且页面不用刷新,用户体验非常好(那时候的网站也没有什么用户体验^_^)

ajax 原理

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户,达到页面无刷新的效果

var xhr = new XMLHttpRequest()
//IE浏览器使用var xhr = new ActiveXObject
xhr.open('get', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
 if (xhr.readyState == 4) {
 if (xhr.status == 200) {
 success(xhr.responseText)
 } else {
 fail && fail(xhr.status)
 }
 }
}

xhr.open()

第三个参数:true/fasle 默认值为true
false就是等待有返回数据的时候再继续往下走,还没有得到数据的时候就会卡在那里,直到获取数据为止。
true就是不等待,直接返回,这就是所谓的异步获取数据!

xhr.send

需要传送的数据,接受一个字符串类型

xhr.onreadystatechange

每次状态改变所都会触发的事件处理程序

xhr.readyState有以下几种状态

0 请求未初始化,open方法尚未调用

1 服务器连接已建立,open方法已经调用,尚未调用send方法

2 请求已接收,也就是接收到头信息了

3 请求处理中,也就是接收到响应主体了,这时因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误

4 请求已完成,数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

xhr.status常见HTTP状态

0**:未被始化

1**:请求收到,继续处理

2**:操作成功收到,分析、接受

3**:完成此请求必须进一步处理

4**:请求包含一个错误语法或不能完成

5**:服务器执行一个完全有效请求失败

jQuery.ajax

$.ajax({
 url: '',
 Type: '',
 data: '',
 async:true,
 dataType: '',
 beforeSend: function(xhr) {
 xhr.setRequestHeader("Access-Toke");
 },
 success: function (data) {
 fn1()
 },
 error: function (err) {
 error && error(err) 
 }
})
fn2()

success-函数

$.ajax中的success方法是否获取成功的回调,jQuery判断了以下几种状态,在源码中有以下代码(大概位置8193行)

isSuccess = status >= 200 && status < 300 || status === 304

304---通常的说法就是浏览器还有缓存,服务器告诉客户,原来缓存的文档还可以继续使用

async-布尔值

async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)

asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在fn1()这个地方,不会去执行fn2(),知道fn1()部分执行完毕。

dataType--字符串

dataType可以指定以下值

xml:返回XML文档,可用JQuery处理

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求

json:返回JSON数据

jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数

text:返回纯文本字符串

beforeSend--函数

送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数

ajax优缺点

优点 : 通过异步,提升用户的体验,减少不必要的数据往返,实现局部刷新

缺点 : 对搜索引擎支持比较弱

下载本文
显示全文
专题