面试题6：Ajax请求原理

最新推荐文章于 2023-06-11 19:18:08 发布

转载最新推荐文章于 2023-06-11 19:18:08 发布 · 1k 阅读

本文介绍AJAX的工作原理及其在用户操作与服务器响应之间的异步处理方式。通过创建AJAX引擎对象实现与服务器的通信，避免了刷新整个页面。详细解释了如何创建XMLHttpRequest对象、发送请求及处理服务器响应。

相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。

对于用户请求ajax引擎会做一些数据验证和数据处理，不是所有请求都提交给服务器，当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求。AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据。

过程：

创建一个ajax引擎对象，ie6是new ActiveXbject其他浏览器是new一个xmlHttpRequest对象；
调用open方法启动一个请求以备发送，open方法传入三个参数请求类型，请求url和一个布尔值
调用send方法发送；
处理回调函数onreadystatechange,当readState =4，响应数据完成时，并且status=200，请求成功的时候，处理响应数据。

注意：回调函数要写在open（）和send（）之前；

1.创建Ajax核心对象XMLHttpRequest

var xmlhttp;  
if (window.XMLHttpRequest)  
  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
  xmlhttp=new XMLHttpRequest();  
  }  
else  
  {// 兼容 IE6, IE5  
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");  
  }

2.向服务器发送请求

xmlhttp.open(method,url,async);  
send(string)

注意：open 的参数要牢记，很多面试官爱问这样的细节
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)方法post请求时才使用字符串参数，否则不用带参数。

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

xmlhttp.open("POST","ajax_test.html",true);  
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("fname=Henry&lname=Ford");

3.服务器响应处理

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

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

3.1 同步处理

xmlhttp.open("GET","ajax_info.txt",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"
403 （禁止）服务器拒绝请求。
404 （未找到）服务器找不到请求的网页。
408 （请求超时）服务器等候请求时发生超时

500 （服务器内部错误）服务器遇到错误，无法完成请求。

文章转载：https://blog.youkuaiyun.com/sinat_35836870/article/details/53256603