Ajax及其应用

m0_57688490

已于 2023-03-21 08:42:30 修改

阅读量551

点赞数

文章标签： ajax javascript 前端

于 2023-03-21 08:40:58 首次发布

本文链接：https://blog.csdn.net/m0_57688490/article/details/129660089

版权

什么是Ajax?

Ajax = 异步 JavaScript 和XML。

Ajax是一种用于创建快速动态网页的技术。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

注：传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页面。

Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

XMLHttpRequest是什么

XMLHTTP是一组API函数集，可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用，通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页，它无需重新从服务器读取整个网页，也不需要安装额外的插件。该技术被许多网站使用，以实现快速响应的动态网页应用。例如：Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。

XMLHttpRequest对象的属性和方法

XMLHttpRequest 对象常用的属性

1.onreadystatechang: 存有处理服务器响应的函数，状态改变时会触发这个事件处理器，指向一个javascript函数

xmlHttp.onreadystatechange = function() {
    //我们需要在这写一些代码
}

2.status: 服务器的http状态代码
3、statusText: http状态码的相应文本
4、responseText: 服务器的响应，通常为一个字符串，可以通过 responseText 属性来取回由服务器返回的数据。

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

5、responseXML:　服务器的响应，通常为一个XML,可以解析为一个DOM对象
6、readyState: 请求状态，存有服务器响应的状态信息。每当 readyState 改变时onreadystatechange 函数就会被执行，我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response获得数据
    }
}

XMLHttpRequest 对象常用的方法

1. open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);

2. send() 方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

XMLHttpRequest对象的常用事件

1. readyStateChange 事件

readyState属性的值发生改变，就会触发 readyStateChange 事件。

我们可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。

2. progress 事件

上传文件时，XMLHttpRequest 实例对象本身和实例的upload属性，都有一个progress事件，会不断返回上传的进度。

let xhr = new XMLHttpRequest();

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    let percentComplete = oEvent.loaded / oEvent.total;
  } else {
    console.log('无法计算进展');
  }
}

xhr.addEventListener('progress', updateProgress);

xhr.open();

3. load 事件、error 事件、abort 事件

load 事件表示服务器传来的数据接收完毕，error 事件表示请求出错，abort 事件表示请求被中断（比如用户取消请求）。

let xhr = new XMLHttpRequest();

xhr.addEventListener('load', transferComplete);
xhr.addEventListener('error', transferFailed);
xhr.addEventListener('abort', transferCanceled);

xhr.open();

function transferComplete() {
  console.log('数据接收完毕');
}

function transferFailed() {
  console.log('数据接收出错');
}

function transferCanceled() {
  console.log('用户取消接收');
}

4. loadend 事件

abort、load和error这三个事件，会伴随一个loadend事件，表示请求结束，但不知道其是否成功。

xhr.addEventListener('loadend', loadEnd);

function loadEnd(e) {
  console.log('请求结束，状态未知');
}

5. timeout 事件

服务器超过指定时间还没有返回结果，就会触发 timeout 事件。

Ajax及XMLHttpRequest对象的方法

使用XMLHTTPRequest进行ajax的操作的四个步骤为：

1.创建对象 (使用new进行创建)

创建XMLHttp对象的语法是：

var xmlHttp=new XMLHttpRequest();

2.2 设置请求方式

在WEB开发中，请求有两种形式，一个是get，一个是post，所以在这里需要设置一下具体使用哪个请求，XMLHttpRequest对象的open()方法就是来设置请求方式的。
open()方法

功能	参数
规定请求的类型、URL 以及是否异步处理请求	参数1：设置请求类型（GET 或 POST），GET与POST的区别请自己百度一下，这里不做解释；参数2：文件在服务器上的位置；参数3：是否异步处理请求，是为true，否为false。

GET 还是 POST？

get请求：

//创建XMLHTTPRequest对象
const xhr = new XMLHttpRequest();
//创建HTTP请求
//1、不带参数的get请求
//xml.open("get","url路径");
//2、带参数的get请求
xml.open("get", "url路径?key1=value1&key2=value2");
xhr.send();
//监听事件
xhr.onreadystatechange = function () {
  //判断请求状态码readyState成功为4，状态码status成功为200
  if (xhr.readyState === 4 && xhr.status === 200)
 
    //得到服务端返回的文本数据
    //此处输出的是JSON字符串类型，转为普通类型，方便之后的DOM操作
    console.log(JsoN.parse(xhr.responseText));
};

post请求：

//创建XMLHTTPRequest对象
const xhr = new XMLHttpRequest();
//创建HTTP请求
xml.open("POST", "url路径");
//使用post请求方式，需要设置消息头！！！
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(""); //必填，需要传输的数据如xhr.send("id=1&author=小范")
//监听事件
xhr.onreadystatechange= function () {
  if (xhr.readyState === 4 && xhr.status === 200)
    // //得到服务端返回的文本数据
    //此处输出的是JSON字符串类型，转为普通类型，方便之后进行DOM操作
    console.log(JsoN.parse(xhr.responseText));
};

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.3 调用回调函数

异步请求需要写一个回调函数，XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：

//第三步：注册回调函数
 
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
            alert("AJAX服务器返回错误！");
        }
    }
}

在上面代码中，xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。所以这里我们判断只有当xmlHttp.readyState为4的时候才可以继续执行。

xmlHttp.status是服务器返回的结果，其中200代表正确。404代表未找到页面，所以这里我们判断只有当xmlHttp.status等于200的时候才可以继续执行。

var obj = document.getElementById(id);

obj.innerHTML = xmlHttp.responseText;

这段代码就是回调函数的核心内容，就是获取后台返回的数据，然后将这个数据赋值给id为testid的div。xmlHttp对象有两个属性都可以获取后台返回的数据，分别是：responseText和responseXML，其中responseText是用来获得字符串形式的响应数据，responseXML是用来获得 XML 形式的响应数据。至于选择哪一个是取决于后台给返回的数据的，这个例子里我们只是显示一条字符串数据所以选择的是responseText。responseXML将会在以后的例子中介绍。

AJAX状态值与状态码区别
AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）
AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成，详细查看RFC）

if(ajax.readyState == 4 && ajax.status == 200) {。。。。);}

AJAX运行步骤与状态值说明
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是：
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

AJAX状态码说明
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败

2.4 发送请求

//第四步：设置发送请求的内容和发送报送。然后发送请求
 
var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();         // 增加time随机参数，防止读取缓存 				
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");                     // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。