ajax封装框架,封装自己的Ajax框架

柔情只为你懂 2022-09-03 15:24 211阅读 0赞

Ajax技术就是利用javascript和xml实现异步交互的功能。

首先先来介绍一下Ajax相关知识点

一、Ajax对象的创建

1、创建Ajax对象的方式

a、第一种方式是针对IE浏览器

![91b6bcaef1fe2a3d21d02e8e48b66794.png][]

b、第二种方式针对w3c：在IE的高版本(IE8+)，已经支持了XMLHttpRequest类

![d57cd229bb0190337b60d35641daea4b.png][]

2、解决兼容性

a、创建公共文件 public.js

![f05d42064db134a580aec07e02341ecc.png][]

b、在需要使用ajax对象的页面中，包含以上js文件

![8f762b0a83be43c769c84050edc6b0ac.png][]

二、ajax对象的相关属性和方法

方法：

1、初始化ajax对象 open(method,url)

method：请求方式  get、post

url：请求地址

2、设置请求头信息 setRequestHeader(header,value)

header：请求头的名称

value：请求头的信息

3、开始发送请求 send(content)

只有当ajax对象的send方法被调用时，才会发送请求

content ：post请求时所传递的数据,get请求时这里直接设置为null

属性：

1、当ajax对象状态码发生改变时所触发的回调函数：onreadystatechange

它的值是一个函数首地址(匿名函数)

xhr.onreadystatechange = function()\{\}

2、ajax对象的状态码(一个数字，从0-4)： readyState

![aa07b2f11312691dd07e7f587b5d6f3e.png][]

![320092f0d05af83e82831f419529f3a6.png][]

![9992f62b55e607af153253390824413b.png][]

3、ajax对象接收到的响应状态码(常用)(200、302、404)：status

4、ajax对象接收到的http响应状态文本(不常用)：statusText

5、ajax对象接收到http响应主体字符串(text/html)：responseText

6、ajax对象接收到的http响应主体内容(text/xml)：responseXML

三、发送GET请求

1、 向服务器发送用户名，并返回hello,zhangsan

![e4cd0b873641dc745ae9f9431d1b2c2a.png][]

php代码如下：

return：返回，将结果返回给php程序本身

echo：输出，利用http协议将数据响应给客户端

![a4c011d3ec5aa729fb3a217726efbf75.png][]

上面代码不足之处：

a、如果将请求地址改为一个不存在的页面地址，那么服务器仍然会返回一个错误信息，而我们的程序应该在得到一个正确的返回结果后才去对数据进行处理。

![9f23a77dc5c66469a5b1bcb8bd580a4b.png][]

2、解决IE缓存问题(将服务器端的PHP略做修改)

![b37a9934d0a632bdf43cd01670f01efa.png][]

在IE下，仍然输出hello,zhangsan、其他浏览器中是正常输出

原因：在IE中，默认有缓存功能，将每次获取的php文件的输出结果缓存下来，下次ajax对象请求时，如果在缓存目录下，找到对应缓存文件，就直接使用缓存文件。

解决方式：

a、在url后面加随机数：Math,random( );

var URL = "demo.php?name=zhangsan&n="+Math.random();

b、在url后面加(毫秒)时间戳：new Date().getTime();

var URL = "demo.php?name=lisi&n="+new Date().getTime();

以上两种方法确保每次请求的url是唯一的。

c、设置ajax对象的请求头，if-modified-since，强制让ajax对象发送请求。

0：表示文件最后修改时间会和服务器上这个资源文件最后修改时间进行比较，肯定是不同的，所以服务器返回了最新数据

xhr.setRequestHeader("If-Modified-Since","0");

以上三种方式并没有根本上解决缓存问题，前两种方式更是缓存下来N个文件。

d、设置http响应头中的cache-control选项，告诉浏览器不要缓存，必须每次重新请求

![bd062063cb645df094c45e3c28f7cc13.png][]

实例：检查用户名是否可用

![2b65ef29a5872cc0e4771c25889edd04.gif][]

![6a087676c59fa8b19d76e6bb55a32902.gif][]

检查用户名是否存在

9 $(function()\{10 //创建ajax对象，此时状态码为0

11 varxhr=creatxhr();12 $("\#name").blur(function() \{13 varname=$(this).val();14 //方法1：随机数

15 varURL= "demo.php?name="+name+"&n="+newDate().getTime();16 //初始化ajax对象 此时状态码为1

17 xhr.open("get",URL);18 //ajax对象状态码发生改变时所触发的回调函数

19 xhr.onreadystatechange= function()\{20 //状态码为4说明接收完毕，做进一步的处理

21 if(xhr.readyState== 4 &&xhr.status== 200)\{22 if(xhr.responseText== 1)\{23 $(".error").html("用户名已存在").css(\{display:"inline-block",color:"red"\});24 \}else\{25 $(".error").css(\{display:"none"\});26 return false;27 \}28 \}29 \};30 //发送请求，此时状态码为2

31 xhr.send(null);32 \});33

34 \})35

40 用户名:

[91b6bcaef1fe2a3d21d02e8e48b66794.png]: /images/20220829/94df2fb5f8e24453ac387db97da784a5.png
[d57cd229bb0190337b60d35641daea4b.png]: /images/20220829/6a3c045b63b446118549bc30ae6d97fa.png
[f05d42064db134a580aec07e02341ecc.png]: /images/20220829/ee77dbfd3cd74187a3fa567a3f09b326.png
[8f762b0a83be43c769c84050edc6b0ac.png]: /images/20220829/46abe369121840f09b4c0e3841717e3a.png
[aa07b2f11312691dd07e7f587b5d6f3e.png]: /images/20220829/930a733879fc45238446019eb106d0e9.png
[320092f0d05af83e82831f419529f3a6.png]: /images/20220829/8c51c301889a43d8b7df0a4a6f863b67.png
[9992f62b55e607af153253390824413b.png]: /images/20220829/fa7b8806024f401dbac4262fb2430466.png
[e4cd0b873641dc745ae9f9431d1b2c2a.png]: /images/20220829/58b524c91da34e7393383716e06c3f47.png
[a4c011d3ec5aa729fb3a217726efbf75.png]: /images/20220829/57489f63927c49009c2ab55017224865.png
[9f23a77dc5c66469a5b1bcb8bd580a4b.png]: /images/20220829/fa0411e156cc408ea98df3110417a2c4.png
[b37a9934d0a632bdf43cd01670f01efa.png]: /images/20220829/11863682e3c247149a3b846c3fa2879a.png
[bd062063cb645df094c45e3c28f7cc13.png]: /images/20220829/f3e8852d67a24c08a3eef88546dd0416.png
[2b65ef29a5872cc0e4771c25889edd04.gif]: /images/20220829/d448fb64b10c417eb509a27b9a373340.png
[6a087676c59fa8b19d76e6bb55a32902.gif]: /images/20220829/0bf71ed9c45241b68b2e102e42e7df43.png