Ajax学习笔记Ajax 编程基础 Ajax 运行原理及实现 Ajax 异步编程 Ajax 封装 FormData 对象的实例方法同源政策 JSONP 代码优化 CORS 跨域资源共享 cookie

最新推荐文章于 2023-05-23 18:12:54 发布

VIP文章 weixin_42199245

最新推荐文章于 2023-05-23 18:12:54 发布

阅读量523

点赞数

文章标签： node.js javascript jquery 前端 npm

本文链接：https://blog.csdn.net/weixin_42199245/article/details/106521880

版权

1.Ajax 编程基础

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

传统网站中存在的问题网速慢的情况下，页面加载时间长，用户只能等
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

1.2Ajax 的运行环境
Ajax 技术需要运行在网站环境中才能生效，也就是要配合服务器端一起工作。我这里使用前几天学的Nodejs知识来创建服务器作为网站服务器。

2.Ajax 运行原理及实现

2.1Ajax运行原理
Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
在这里插入图片描述
2.2Ajax 的实现步骤
演示一个基本的ajax实现步骤
html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.创建Ajax对象
        var xhr = new XMLHttpRequest();
        // 2.告诉Ajax对象用打开哪个链接，用什么方式请求
        xhr.open('get','http://localhost:3000/first');
        //3.向服务器端发送请求
        xhr.send();
        //4.响应给客户端
        xhr.onload = function() {
   
            console.log(xhr.responseText);
        }
    </script>
</body>
</html>

对应的服务器端代码如下：

app.get('/first',(req,res) => {
   
    res.send('hello Ajax!');
});

保存文件，运行html文件在浏览器打开，记得把网址栏的路径改为localhost:3000/该html文件名称，我这里指定的端口号为3000。一定要改网址栏地址，很重要！否则无法正常运行，不能运行原因涉及到跨域问题，后面会提到。

2.3服务器端响应的数据格式
在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() // 将 json 字符串转换为json对象

服务器端以 JSON 对象作为响应数据，关键代码如下：

const bodyParser = require('body-parser');

app.use(bodyParser. urlencoded({
   extended:false});

app.post('/responDate',(req,res) => {
   
    res.send({
   'name':'Fiona'});
 });

body-parser模板是要下载的，用命令npm install body-parser下载

下面我们将服务器端传过来的字符串转换为JSON格式
（html文件）客户端拿到响应数据：

		//创建Ajax对象
        var xhr = new XMLHttpRequest();
        //指定响应地址及响应方式
        xhr.open('get','http://localhost:3000/responDate');
        //发送请求
        xhr.send();
        //返回服务器端响应给客户端的数据
        xhr.onload = function() {
   
        	//显示服务器端传过来的数据类型
        	console.log(typeof xhr.responseText);//String
            let resDate = JSON.parse(xhr.responseText);
            document.body.innerHTML = '<h2>'+resDate.name +'</h2>';
            // console.log();    
        }

2.4请求参数传递

2.4.1GET 请求方式

//创建Ajax对象
 var xhr = new XMLHttpRequest();
 //指定响应地址及响应方式
 xhr.open('get','http://localhost:3000/get?'+'username='+username.value+'&age='+age.value);
 //发送请求
 xhr.send();
 //返回服务器端响应给客户端的数据
 xhr.onload = function() {
   
     console.log(xhr.responseText);
     
 }

2.4.2POST 请求方式

//创建Ajax对象
 var xhr = new XMLHttpRequest();
 //指定响应地址及响应方式
 xhr.open('post','http://localhost:3000/post');
 //设置请求格式
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 //发送请求
 xhr.send('username='+username.value+'&age='+age.value);
 //返回服务器端响应给客户端的数据
 xhr.onload = function() {
   
     console.log(xhr.responseText);
     
 }

可以把上述两种请求方式的代码进行对比，post请求方式在于传递参数的形式不同，get 请求方式是直接把请求参数接在后面，post请求方式则把参数放在xhr.send()里面来进行传递。
同时post请求多了一行代码用于设置请求格式，如果是post请求就一定要设置，很重要。因为post请求还可以用于传递json格式的参数，如果是json格式的参数，其Content-Type的属性应设置为application/json，这里就涉及到请求报文。

2.5请求报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。
在这里插入图片描述
2.6请求参数的格式

2.6.1. application/x-www-form-urlencoded
用法参考上面的代码例子

2.6.2. application/json
在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。

客户端实例代码如下：

//创建Ajax对象
 var xhr = new XMLHttpRequest();
 //指定响应地址及响应方式
 xhr.open('post','http://localhost:3000/json');
 //设置请求格式
 xhr.setRequestHeader('Content-Type', 'application/json');
 //发送请求，JSON.stringify()用于将json格式数据转换为字符串格式
 xhr.send(JSON.stringify({
   name:'Fiona', age:18}));
 //返回服务器端响应给客户端的数据
 xhr.onload = function() {
   
     console.log(xhr.responseText);
     
 }

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

2.7获取服务器端的响应
2.7.1Ajax 状态码
在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。
0：请求未初始化(还没有调用open())
1：请求已经建立，但是还没有发送(还没有调用send())
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了

xhr.readyState // 获取Ajax状态码

2.7.2onreadystatechange 事件
当 Ajax 状态码发生变化时将自动触发该事件。
在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了。
两种获取服务器端响应方式的区别
在这里插入图片描述

综合上面Ajax 状态码和onreadystatechange 写一个简单的代码看一下效果：

//创建Ajax对象
 var xhr = new XMLHttpRequest();
 //未进行Ajax对象配置
 console.log('未进行Ajax对象配置：'+xhr.readyState);
 //对Ajax进行配置
 xhr.open('get','http://localhost:3000/readState');
 console.log('Ajax配置后：'+xhr.readyState);

 //当Ajax状态码发生变化时
 xhr.onreadystatechange = function() {
   
     console.log('状态码发生改变后：'+xhr.readyState);
     // 2 请求已经发送了
     // 3 已经接收到服务器端的部分数据了
     // 4 服务器端的响应数据已经接收完成
     if(xhr.readyState == 4){
   
         console.log('状态码为4：'+xhr.responseText);
     }
 }
 xhr.send();

光看代码看不出效果，可以运行到浏览器控制台看一看便知晓。

2.8Ajax 错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。可以判断服务器端返回的状态码，分别进行处理。xhr.status获取http状态码。
网络畅通，服务器端没有接收到请求，返回404状态码。检查请求地址是否错误。
网络畅通，服务器端能接收到请求，服务器端返回500状态码。服务器端错误，找后端程序员进行沟通。
网络中断，请求无法发送到服务器端。会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

关于错误处理实例代码如下：

//创建Ajax对象
 var xhr = new XMLHttpRequest();
 //指定响应地址及响应方式
 xhr.open('get','http://localhost:3000/error');
 //发送请求
 xhr.send();

 //返回服务器端响应给客户端的数据
 xhr.onload = function() {
   
     console.log(xhr.responseText);
     if(xhr.status == 400){
   
         console.log('请求出错');
     }
     
 }
 xhr.onerror = function() {
   
     console.log('网络中断');
 }

服务端发送错误请求

app.get('/error',(req,res) => {
   
    res.status(400).send('no ok');
    // res.send('hello');
});

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

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get', 'http://www.example.com?t=' + Math.random());

3.Ajax 异步编程

3.1同步异步概述
同步异步的概念前面有提到过，在之前的文章。

用法前面代码提到过请求响应原理及HTTP协议学习笔记
在Nodejs异步编程目录下有提到，同样的xhr.onreadystatechange 和xhr.onload函数也属于异步编程
3.2Ajax 封装

function ajax(option) {
   
     let defaults = {
   
         type:'get',
         url:'',
         data:{
   },
         header:{
   
             'Content-Type': 'application/x-www-form-urlencoded'
         },
         success:function() {
   },
         error:function() {
   }
     };
     //创建Ajax对象
     let xhr = new XMLHttpRequest();
     //深层拷贝，把option中的数据覆盖defaults中
     Object.assign(defaults,option);
     //对请求参数处理
     let params = '';
     for(var attr in data){
   
         params += attr +'='+ defaults.data[attr]+'&';
     }
     //截取参数，去除后面的&符号
     params = params.substring(0,params.length-1);

     //判断请求方式,get
     if(defaults.type == 'get'){
   
         defaults.url = defaults.url +'?'+params;
     }
     // 配置Ajax对象
     xhr.open(option.type,option.url);

     //判断请求方式,post
     if(defaults.type == 'post'){
   
         //设置请求参数格式
         let ContentType = defaults.header['ContentType'];
         xhr.setRequestHeader('Content-Type',ContentType);
         //如果参数格式为json
         if(ContentType == 'application/json'){
   
             //像服务的传递JSON格式的参数
             xhr.send(JSON.stringify(defaults.data));
         }else{
   
             xhr.send(params);
         }
         
     }else{
   
         //发送请求
         xhr.send();
     }
           
     //服务器端响应给客户端

最低0.47元/天解锁文章

weixin_42199245

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习笔记Ajax 编程基础 Ajax 运行原理及实现 Ajax 异步编程 Ajax 封装 FormData 对象的实例方法同源政策 JSONP 代码优化 CORS 跨域资源共享 cookie

Ajax 编程基础Ajax 运行原理及实现Ajax 异步编程Ajax 封装FormData 对象的实例方法同源政策JSONP 代码优化CORS 跨域资源共享cookie jQuery 中的 AjaxAjax全局事件RESTful 和 XML
复制链接

扫一扫