Ajax学习总结

目录

一、Ajax概述

1.同异步请求

2.AJAX 的优势

3.工作原理

二、Ajax使用

1.创建Ajax对象

2.创建HTTP请求

3.响应函数

4.发送HTTP请求

---

一、Ajax概述

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
• 是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
• 是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

1.同异步请求

同步请求：

•  同步请求是指当前发出请求后，浏览器什么都不能做，
•  必须得等到请求完成返回数据之后，才会执行后续的代码，
•  相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
•  也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
•  当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

异步请求：

• 默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
• Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
• 一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
• 无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉

区别：

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

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

2.AJAX 的优势

• 不需要插件的⽀持，原⽣ js 就可以使⽤
• ⽤户体验好（不需要刷新⻚⾯就可以更新数据）
• 减轻服务端和带宽的负担
• 缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到

3.工作原理

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

二、Ajax使用

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

• 创建XMLHttpRequest对象,即创建一个异步调用对象.
• 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
• 设置响应HTTP请求状态变化的函数.
• 发送HTTP请求.
• 获取异步调用返回的数据.

1.创建Ajax对象

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。

XMLHttpRequest 对象方法

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象

XMLHttpRequest 对象属性:

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found"
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

创建⼀个 ajax 对象

// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示：

var xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象
createXMLHttpRequst();   //调用创建对象的方法
//创建XMLHttpRequest对象的方法 
function createXMLHttpRequest(){                                                 
    if(window.ActiveXObject) {//判断是否是IE浏览器
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象
    }else if(window.XMLHttpRequest){//判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
        xmlHttpRequest = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象
    }
}

2.创建HTTP请求

创建了XMLHttpRequest对象之后，必须为XMLHttpRequest对象创建HTTP请求，用于说明XMLHttpRequest对象要从哪里获取数据。通常可以是网站中的数据,也可以是本地中其他文件中的数据。

  创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:

XMLHttpRequest.open(method,URL,flag,name,password);

代码中的参数解释如下所示:

• method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。
• URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。
• flag：该参数为可选，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步，默认为true。
• name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。
• password：该参数为可选，用于输入密码。若服务器需要验证，则必须使用该参数。

注意：

• 如果HTML文件放在Web服务器上，在Netscape浏览器中的JavaScript安全机制不允许与本机之外的主机进行通信。也就是说，使用open()方法只能打开与HTML文件在同一个服务器上的文件。而在IE浏览器中则无此限制（虽然可以打开其他服务器上的文件，但也会有警告提示）。

3.响应函数

• 创建完HTTP请求之后，应该就可以将HTTP请求发送给Web服务器了。
• 然而，发送HTTP请求的目的是为了接收从服务器中返回的数据。
• 从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历5中状态。

readyState属性值是用来表示状态的状态码

•  readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
•  readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
•  readyState === 2 : 表示 send 方法已经执行完成
•  readyState === 3 : 表示正在解析响应内容
•  readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据

如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。

      异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功，因此，要获取服务器返回数据的语句，还必须要先判断XMLHttpRequest对象的status属性值是否等于200，如以下代码所示：

if(xmlHttpRequst.status == 200) {
    document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
    //document.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
}

4.发送HTTP请求

在经过以上几个步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法，其语法代码如下所示：

XMLHttpRequest.send(data);

其中data是个可选参数，如果请求的数据不需要参数，即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似，以下代码为一个send()方法中的data参数的示例：

name=myName&value=myValue
xhr.open('get', './data.php?a=100&b=200')

 

---

本文由博主在学习过程中所写，如有错误和问题，望理解。