Ajax基础

最新推荐文章于 2025-03-19 22:20:26 发布

Isco也是O型腿

最新推荐文章于 2025-03-19 22:20:26 发布

阅读量565

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_53926719/article/details/115603290

版权

前端专栏收录该内容

15 篇文章

订阅专栏

Ajax基础

简介

在这里插入图片描述

特点

优点：

可以无需刷新页面而与服务器进行通信
允许根据用户事件来更新部分页面内容

缺点：

没有浏览历史，不能回退
存在跨域问题
seo不友好

工作原理

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

浏览器的Ajax交互方式
在这里插入图片描述

XMLHttpRequest 对象的三个常用的属性

1.onreadyatatechange 属性

(以下，已创建对象xhr = new XMLHttpRequest())
onreadystatechange 属性存有处理服务器响应的函数。

 xhr.onreadystatechange = function(){
           ....
}

2.readyatate 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：
在这里插入图片描述

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：

 //判断（服务器是否返回了所有的结果）
   if(xhr.readyState === 4){
          ...
        //从服务器的response获得数据
                }

3.responseText 属性

通过responseText属性获取服务器返回的数据，并赋值给目标

     if(xhr.status >= 200  && xhr.status <=300){
      div.innerHTML = xhr.response
     }

其他属性如下：
在这里插入图片描述

xmlhttprequst的方法

1.open方法

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

            //初始化，设置请求方法和url
     xhr.open('GET','http://127.0.0.1:8000/delay')
     //get方法，脚本地址

****net::ERR_EMPTY_RESPONSE bug：

一开始设置get请求时一直出现这个 net::ERR_EMPTY_RESPONSE，send中一开始没有传参，后来传参也不行，都是没有返回请求，以为是send出现了问题，原来是接口要求传入参数，get怎么传参呢？
get方法传入参数在请求域名后直接加入参数，如：user/isLogin?userId=’+num，加个问号，如果多个参数则&连接

2.send方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，可以不传参或者传null。如果是POST方法还要设置请求头

其他方法

在这里插入图片描述

Ajax变成步骤

1.创建xmlHttpRequest对象

var xmlHttp=new XMLHttpRequest();

2.设置请求方式

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

         //初始化，设置请求方法和url       
       xhr.open('GET','http://127.0.0.1:8000/delay')

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

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

异步 - Ture或False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

3.调用回调函数

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

//第三步：注册回调函数
 
xhr.onreadystatechange = function() {
//判断只有当xhr.readyState为4的时候,即请求已完成才可以继续执行
    if (xhr.readyState == 4) {
    //判断只有当xhr.status等于200的时候，即返回内容正确才可以继续执行
        if (xhr.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xhr.responseText;
        } else {
            alert("AJAX服务器返回错误！");
        }
    }
}

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

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

再具体就如下：

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

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);