ajax请求过程

Ajax是什么

我理解Ajax 是一种异步请求数据的一种技术,对于改善用户的体验和程序的性能很有帮助。

Ajax的使用

(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.   

(3)设置响应`HTTP`请求状态变化的函数.    

(4)发送`HTTP`请求.    

(5)获取异步调用返回的数据.    

(6)使用JavaScript和DOM实现局部刷新.

var xmlhttp = new XMLHttpRequest();

xmlHttp.open('get','demo.php','true');

xmlHttp.send();

xmlHttp.onreadystatechange()=>{

        if(xmlHttp.readyState === 4 && xmlHttp.status === 2000){

        }

}

以下步骤,如果不能理解你死记硬背都要记下来,总比你答不出来要好吧!

1.创建Ajax核心对象XMLHttpRequest

var xmlhttp;

if(window.XMLHttpRequest){

        //IE7+,Chrome,Firefox,Safari,Opera执行此代码 xmlhttp=new XMLHttpRequest;

}else{

        //IE5,IE6执行该代码

        xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

2.向服务器发送请求

xmlhttp.open(method,url,async);

xmlhttp.send();

示例如下:

xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",true);

xmlhttp.send();


注意一:open 的参数要牢记,很多面试官爱问这样的细节

-method:请求的类型;GET 或 POST

-url:文件在服务器上的位置,相对位置或绝对位置

-async:true(异步)或 false(同步)

-为什么使用 Async=true ?

我们的实例在 open() 的第三个参数中使用了 "true"。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。

onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下,防止代码停止的最安全的方法。

通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要,那么可以使用这个参数


注意二:post请求不同于get请求

send(string)方法post请求时才使用字符串参数,否则不用带参数。


注意三:post请求一定要设置请求头的格式内容

xmlhttp.open("POST","ajax_test.html",true);

xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Herry&lname=Ford");

3.服务器响应处理

responseText    获得字符串形式的响应数据。

responseXML   获得XML 形式的响应数据。

3.1 同步处理

xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",false);

xmlhttp.send();

document.getElementById("mydiv").innerHTML=xmlhttp.responseText;

直接在send()后面处理返回来的数据。

3.2 异步处理

 异步处理相对比较麻烦,要在请求状态改变事件中处理。

xmlhttp.onreadystatechange=function(){//接收到服务端响应时触发

if(xmlhttp.readyState==4&&xmlhttp.status==200){

document.getElementById("mydiv").innerHTML=xmlhttp.responseText;

      }

}

一共有5中请求状态,从0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

xmlhttp.status:响应状态码。这个也是面试比较爱问的,这个必须知道4个以上,比较常见的有:

200: "OK"

304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。

403   (禁止) 服务器拒绝请求。

404   (未找到) 服务器找不到请求的网页。

408  (请求超时) 服务器等候请求时发生超时。

500   (服务器内部错误)  服务器遇到错误,无法完成请求。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容