Ajax原理和执行流程

傷城~ 2023-08-17 15:36 139阅读 0赞

**同步交互与异步交互：**  
同步：  
>发一个请求，就要等待服务器的响应结束，然后才能发出第二个请求！中间的时间只能等待。  
>刷新的是整个页面！给用户带来不好的体验

异步：  
>发一个请求后，无需等待服务器的响应，然后就可以发出第二个请求！  
>可以使用js接收服务器的响应，然后使用js来局部刷新！

**是什么ajax及其特点：**  
\*asynchronous javascript and xml：异步的js和xml技术  
\*它能使js访问服务器，且是异步访问  
\*ajax由于只是局部刷新，服务器就不再响应整个页面，只是得到了服务器的数据，节约了资源。

**数据交换格式：**  
>text：纯文本  
>xml：xml文件  
>json：它是js提供的数据交互格式

**ajax应用场景：**  
>百度的搜索框  
>用户注册时(效验用户名是否被注册过)

**ajax的优缺点：**  
优点：  
>异步交互：增强了用户的体验！  
>性能：因为服务器无需响应整个页面，只需响应部分内容，服务器的压力减轻。  
缺点：  
>ajax无端的增多了对服务器的访问次数，给服务器带来了压力。

# **ajax发送异步请求步骤(四步操作)** #

**1.第一步(得到XMLHttpRequest)**  
>获得XMLHttpRequest方式：

大多数游览器支持:var xmlHttp=new XMLHttpRequest();
    IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    IE5.5以及更早的版本:var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

>编写创建XMLHttpRequest对象的函数：

**2.第二步(打开与服务器的连接)**  
xmlHttp.open("请求方式”,"请求URL","请求是否为异步(默认为false)")用来打开与服务器的连接，它需要三个参数：  
>请求方式：可以是*GET*或者*POST*(**两者在第二三步处理方式不同)**  
>请求的URL：指定服务器端的资源，例如：/day/AServlet  
>请求是否为异步：如果为true表示发送异步请求，否则为同步。注：如果为同步则会等待服务器的响应，在执行后面的代码，如果为异步，则继续执行。

*GET方式：*  
xmlHttp.open("GET","/day/AServlet",true);

*POST方式：*  
xmlHttp.open("POST","/day/AServlet",true);  
新增(手动设置头信息)：  
请求元素不包含文件上传：xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
包含文件上传：xmlHttp.setRequestHeader("Content-Type","multipart/form-data");

**3.第三步(发送请求)**  
*GET方式：*  
xmlHttp.send(null):如果不给可能会造成部分游览器无法发送!  
>参数：就是请求体内容！如果是GET请求，必须给出null

*POST方式:*  
xmlHttp.send("username="+username.value()):手动设置响应体

**4.第四步()**  
1）在xmlHttp对象的一个事件上注册监听器：*onreadystatechange*(复写：回调函数)。  
2）回调函数接收xmlHttp对象的5个状态：  
>0状态：刚创建，还没有调用open()方法；  
>1状态：请求开始：调用了open()方法，但还没有调用send()方法  
>2状态：调用完了send()方法了；  
>3状态：服务器已经开始响应，但不表示响应结束了！  
>4状态：服务器响应结束！(通常我们只关系这个状态！！！)  
3）得到xmlHttp对象的状态：  
>var state=xmlHttp.readyState; // 可能是0 1 2 3 4  
4)得到服务器的响应状态码  
>var status =xmlHttp.status；//例如为200、404、500  
*5)得到服务器响应的内容(两种格式)*  
>var content=xmlHttp.responseText； //得到服务器的响应的文本格式的内容。  
>var content=xmlHttp.responseXml; //得到服务器的响应的xml响应的内容！将自动解析为Document对象

xmlHttp.onreadystatechange = function(){ //xmlHttp的5种状态都会调用方法
        if(xmlHttp.readyState==4&&xmlHttp.status==200){ //双重判断：判断是否为4状态，而且还要判断是否为200
            //获取服务器的响应内容
            var text=xmlHttp.responseText;    
        } 
        
    }