Ajax编程基础之运行原理与Ajax函数的封装

女爷i 2023-02-18 14:09 13阅读 0赞

### Ajax编程基础之运行原理与Ajax函数的封装 ###

*  Ajax编程基础之运行原理与Ajax函数的封装
 *   *  1 Ajax基础
     *  2 Ajax运行原理及实现
     *   *  2.1 Ajax 运行原理
         *  2.2 Ajax 实现步骤
         *  2.3 Ajax 知识点详解
         *   *  2.3.1 处理服务器端响返回的JSON数据
             *  2.3.2 传递get、post和json参数
             *  2.3.3 获取服务器端的响应
             *  2.3.4 Ajax错误处理
             *  2.3.5 Ajax缓存
     *  3 Ajax异步编程
     *   *  3.1 异步
         *  3.2 Ajax封装

# Ajax编程基础之运行原理与Ajax函数的封装 #

## 1 Ajax基础 ##

**1.Ajax概述**  
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

**2.Ajax 的应用场景：**

1.  页面上拉加载更多数据
2.  列表数据无刷新分页
3.  表单项离开焦点数据验证
4.  搜索框提示文字下拉列表

**3.Ajax 的应用场景：**  
Ajax 技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器作为网站服务器。

## 2 Ajax运行原理及实现 ##

### 2.1 Ajax 运行原理 ###

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。  
![在这里插入图片描述][20200618095949651.png]

### 2.2 Ajax 实现步骤 ###

### 2.3 Ajax 知识点详解 ###

#### 2.3.1 处理服务器端响返回的JSON数据 ####

服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。  
在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

// 4.获取服务器端响应到客户端的数据
    		xhr.onload = function (){ 
    			// console.log(typeof xhr.responseText)
    			// 将JSON字符串转换为JSON对象
    			var responseText = JSON.parse(xhr.responseText);
    			// 测试：在控制台输出处理结果
    			console.log(responseText)
    			// 将数据和html字符串进行拼接
    			var str = '<h2>'+ responseText.name +'</h2>';
    			// 将拼接的结果追加到页面中
    			document.body.innerHTML = str;

#### 2.3.2 传递get、post和json参数 ####

**1.传递get请求参数：**

// 拼接请求参数:username=123&age=456
    var params = 'username='+ nameValue +'&age=' + ageValue;
    // 配置ajax对象
    xhr.open('get', 'http://localhost:3000/get?'+params);
    // 发送请求
    xhr.send();

**2.传递post请求参数：**

var params = 'username='+ nameValue +'&age=' + ageValue;
    // 配置ajax对象
    xhr.open('post', 'http://localhost:3000/post');
    // 设置请求参数格式的类型（post请求必须要设置）
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 发送请求
    xhr.send(params);

**2.传递json格式请求参数：**

// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
    		// 1)请求方式 2)请求地址
    		xhr.open('post', 'http://localhost:3000/json');
    		// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
    		xhr.setRequestHeader('Content-Type', 'application/json');
    		// JSON.stringify() 将json对象转换为json字符串
    		// 3.发送请求
    		xhr.send(JSON.stringify({ name: 'lisi', age:50}));

注意：get请求是不能提交json对象数据格式的，传统的网站表单提交也是不支持json对象数据格式。

#### 2.3.3 获取服务器端的响应 ####

**1.Ajax状态码：**  
在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

*  0：请求未初始化(还没有调用open())
 *  1：请求已经建立，但是还没有发送(还没有调用send())
 *  2：请求已经发送
 *  3：请求正在处理中，通常响应中已经有部分数据可以用了
 *  4：响应已经完成，可以获取并使用服务器的响应了

**2.onreadystatechange 事件：**  
当 Ajax 状态码发生变化时将自动触发该事件。

// 当ajax状态码发生变化的时候出发
    		xhr.onreadystatechange = function() { 
    			// 2 请求已经发送了
    			// 3 已经接收到服务器端的部分数据了
    			// 4 服务器端的响应数据已经接收完成
    			console.log(xhr.readyState);
    			// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
    			if (xhr.readyState == 4) { 
    				console.log(xhr.responseText);
    			}
    		}

**3.onload事件与onreadystatechange事件的区别：**

<table> 
 <thead> 
  <tr> 
   <th>区别表述</th> 
   <th>onload事件</th> 
   <th>onreadystatechange事件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>是否兼容IE低版本</td> 
   <td>不兼容</td> 
   <td>兼容</td> 
  </tr> 
  <tr> 
   <td>是否需要判断Ajax状态码</td> 
   <td>不需要</td> 
   <td>需要</td> 
  </tr> 
  <tr> 
   <td>被调用次数</td> 
   <td>一次</td> 
   <td>多次</td> 
  </tr> 
 </tbody> 
</table>

#### 2.3.4 Ajax错误处理 ####

1.  网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。  
    可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码

xhr.status == 400

1.  网络畅通，服务器端没有接收到请求，返回404状态码。  
    检查请求地址是否错误。
2.  网络畅通，服务器端能接收到请求，服务器端返回500状态码。  
    服务器端错误，找后端程序员进行沟通。

console.log(abc);服务器端发送一个错误的数据，会报错500状态码

1.  网络中断，请求无法发送到服务器端。  
    会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

// 当网络中断时会触发onerrr事件
    xhr.onerror = function () { 
    	alert('网络中断, 无法发送Ajax请求')
    }

**注意：**  
1.Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的；  
2. Http状态码: 表示请求的处理结果 是服务器端返回的。

#### 2.3.5 Ajax缓存 ####

\*\*问题：\*\*在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。  
\*\*解决方案：\*\*在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

btn.onclick = function () { 
    			// 1.创建ajax对象
    			var xhr = new XMLHttpRequest();
    			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
    			// 1)请求方式 2)请求地址
    			xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random());
    			// 3.发送请求
    			xhr.send();
    			// 4.获取服务器端响应到客户端的数据
    			xhr.onreadystatechange = function (){ 
    				if (xhr.readyState == 4 && xhr.status == 200) { 
    					alert(xhr.responseText);
    				}
    			}			
    		}
    //对应的服务器端代码
    app.get('/cache', (req, res) => { 
    	fs.readFile('./test.txt', (err, result) => { 
    		res.send(result);
    	});
    });

## 3 Ajax异步编程 ##

### 3.1 异步 ###

此时会先输出1，再执行ajax的内容：

// 4.获取服务器端响应到客户端的数据
    		xhr.onreadystatechange = function (){ 
    			if (xhr.readyState == 4) { 
    				console.log('2')				console.log(xhr.responseText)
    			}			
    		}
    		console.log('1');

### 3.2 Ajax封装 ###

将请求代码封装到函数中，发请求时调用函数即可。

[20200618095949651.png]: https://img-blog.csdnimg.cn/20200618095949651.png