第22节 Ajax工作原理

目录

1、什么是Ajax

2、同步与异步的区别

3、ajax的工作原理

4、使用ajax发送数据的五个步骤：

5、我的第一个服务器应用

6、我的第一个Ajax页面

---

1、什么是Ajax

Ajax全称Asynchronous Javascript And XML，即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

2、同步与异步的区别

　　 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

        异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。

3、ajax的工作原理

客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：

4、使用ajax发送数据的五个步骤：

第一步：创建异步对象

var xhr = new XMLHttpRequest();  //其他浏览器，比如常用的谷歌 var xhr=new ActiveXObject(“Microsoft.XMLHTTP”); //IE5或IE6及其以前的浏览器版本

第二步：调用 open(请求方式get或post，请求url): （打开与服务器的连接）

// get请求如果有参数就需要在url后面拼接参数， //post如果有参数，就在请求体中传递  xhr.open("get","validate.jsp?username="+name) xhr.open("post","validate.jsp");

第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()

// 1.get不需要设置 // 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：发送请求 send()

// 1.get的参数在url拼接了，所以不需要在这个函数中设置，参数为null // 2.post的参数在这个函数中设置(如果有参数) xhr.send(null);    xhr.send("username="+name