Ajax基础

雨点打透心脏的1/2处 2021-08-13 18:09 491阅读 0赞

## 1：ajax基础 ##

## 2：ajax运行原理及实现(都是在为浏览器做事) ##

## 3：ajax异步编程 ##

## ajax基础 ##

传统网站中存在问题：网速慢的时候，加载页面非常慢，用户体验不好  
表单提交内容后，如果有一项不符合要求，就要重新填写所有表单  
页面跳转，重新加载资源，造成资源浪费，用户等待时间长

###### ajax概述：是浏览器提供的一套方法，可以实现页面无数新跟新数据，提高用户体验 ######

###### 运行环境：在网站环境中才生效(要会使用node的express创建网站服务器) ######

前期准备：  
初始化项目 **npm init -y**  
安装express：**npm i express**

// 引入express框架
    const express = require('express')
        // 路径处理模块
    const path = require('path')
        // 创建web服务器
    const app = express();
    // 静态资源访问功能：可以规定静态资源访问的根目录，后续只需要输入指定的文件即可
    app.use(express.static(path.join(__dirname, 'public')))
        // 监听
    app.listen(80);
    console.log('Run-Server-ajax');

## ajax运行原理及实现(都是在为浏览器做事) ##

原理：ajax相当于浏览器发送请求和响应数据的代理人，在不影响用户浏览页面的情况下，实现页面的局部刷新  
实现：  
**创建ajax对象**：var xhr = new XMLHttpRequest()  
**告诉ajax请求的方式和地址** xhr.open(‘get’,‘baidu.com’)  
**发送请求** xhr.send()  
**获取服务端给浏览器的响应数据**  
当ajax接收完服务端的响应就会触发onload事件  
xhr.οnlοad= function()\{  
console.log(xhr.responseText)  
\}  
在服务器添加响应路由，以便将数据传输给浏览器

app.get('/first', (req, res) => {
            res.send('OKOK')
        })

在客户端使用ajax

请求方式和请求路径要一致  
在http请求和响应的过程中，无论是字符串还是对象类型，都会被转化成json对象字符串类型，所以在客户端需要对数据进行处理，转化为json对象 varvar

```javascript
    responce = json.parse(xhr.reponseText)
    srt  = '<h2>'+  responce.name+'</h2>'

再进行字符串的拼接： document.body.innerHTML = str
    **get请求** 放在地址栏中

Document

\`\`\` 服务器端通过req.query接收请求参数，通过res.send()将数据响应给客户端 post传参都是拼接的形式

**post请求**：放在请求体当中

btn.onclick = function() { 
                // 创建ajax对象
                var xhr = new XMLHttpRequest();
                // 获取用户在文本框中输入的值
                var nameValue = username.value;
                var ageValue = age.value;
                // 拼接请求参数
                var params = 'username=' + nameValue + '&age=' + ageValue;
                // 配置ajax对象，将参数放在？后面
                xhr.open('post', 'http://localhost:3000/post');
                // 发送请求
                // 设置请求参数的格式:get只能以这种方式提交参数
                xhr.setRequestHeader('Content-type', 'application/w-xxx-from-urlencoded')
                xhr.send(params);
                // 获取服务器端响应的数据
                xhr.onload = function() { 
                    console.log(xhr.responseText)
                }
            }

将参数放在send里面，在服务器通过req.body来接收参数，res.send()来响应数据  
服务器需要 安装 npm i body-parser 模块  
const bodyParser =require (‘body-parser’)  
app.use(bodyParser.urlencoded())  
如果说是json格式：  
在客户端： 需要将json格式的对象转化为字符串 json.stringify(\{name:‘1’\})  
对应的application/json  
app.use(bodyParser.json())

**请求报文**:在http请求和响应过程中传递的数据块就是报文，报文分报文头和报文体  
**AJAX错误处理**

1.  网络通畅，服务器能接收到请求，但是服务器返回的的不是预期效果  
    **用xhr.status来判断状态**
2.  404：检查路径
3.  500：找后端
4.  没网：不会触发onload,但是会触发onerror事件， xhr.onerror = function()\{\}  
    **ajax状态码：表示请求的状态，是ajax对象返回的**  
    **http状态码：表示请求的结果，是服务器返回的**

##### 低版本ie浏览器的缓存问题 #####

解决方法：**在请求地址后面加请求参数，保证没次请求参数的值不同**  
xhr.open(‘get’,‘http://localhost:3000/a?t=’+Math.random())

## ajax异步编程 ##

**ajax封装**:  
对象值可以对属性进行描述

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<script type="text/javascript">
    		function ajax (options) { 
    			// 存储的是默认值
    			var defaults = { 
    				type: 'get',
    				url: '',
    				data: { },
    				header: { 
    					'Content-Type': 'application/x-www-form-urlencoded'
    				},
    				success: function () { },
    				error: function () { }
    			};
    
    			// 使用options对象中的属性覆盖defaults对象中的属性
    			Object.assign(defaults, options);
    
    			// 创建ajax对象
    			var xhr = new XMLHttpRequest();
    			// 拼接请求参数的变量
    			var params = '';
    			// 循环用户传递进来的对象格式参数
    			for (var attr in defaults.data) { 
    				// 将参数转换为字符串格式
    				params += attr + '=' + defaults.data[attr] + '&';
    			}
    			// 将参数最后面的&截取掉 
    			// 将截取的结果重新赋值给params变量
    			params = params.substr(0, params.length - 1);
    
    			// 判断请求方式
    			if (defaults.type == 'get') { 
    				defaults.url = defaults.url + '?' + params;
    			}
    
    			/* { name: 'zhangsan', age: 20 } name=zhangsan&age=20 */
    
    			// 配置ajax对象
    			xhr.open(defaults.type, defaults.url);
    			// 如果请求方式为post
    			if (defaults.type == 'post') { 
    				// 用户希望的向服务器端传递的请求参数的类型
    				var contentType = defaults.header['Content-Type']
    				// 设置请求参数格式的类型
    				xhr.setRequestHeader('Content-Type', contentType);
    				// 判断用户希望的请求参数格式的类型
    				// 如果类型为json
    				if (contentType == 'application/json') { 
    					// 向服务器端传递json数据格式的参数
    					xhr.send(JSON.stringify(defaults.data))
    				}else { 
    					// 向服务器端传递普通类型的请求参数
    					xhr.send(params);
    				}
    
    			}else { 
    				// 发送请求
    				xhr.send();
    			}
    			// 监听xhr对象下面的onload事件
    			// 当xhr对象接收完响应数据后触发
    			xhr.onload = function () { 
    
    				// xhr.getResponseHeader()
    				// 获取响应头中的数据
    				var contentType = xhr.getResponseHeader('Content-Type');
    				// 服务器端返回的数据
    				var responseText = xhr.responseText;
    
    				// 如果响应类型中包含applicaition/json
    				if (contentType.includes('application/json')) { 
    					// 将json字符串转换为json对象
    					responseText = JSON.parse(responseText)
    				}
    
    				// 当http状态码等于200的时候
    				if (xhr.status == 200) { 
    					// 请求成功 调用处理成功情况的函数
    					defaults.success(responseText, xhr);
    				}else { 
    					// 请求失败 调用处理失败情况的函数
    					defaults.error(responseText, xhr);
    				}
    			}
    		}
    
    		ajax({ 
    			type: 'post',
    			// 请求地址
    			url: 'http://localhost:3000/responseData',
    			success: function (data) { 
    				console.log('这里是success函数');
    				console.log(data)
    			}
    		})
    
    		/* 请求参数要考虑的问题 1.请求参数位置的问题 将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置 get 放在请求地址的后面 post 放在send方法中 2.请求参数格式的问题 application/x-www-form-urlencoded 参数名称=参数值&参数名称=参数值 name=zhangsan&age=20 application/json {name: 'zhangsan', age: 20} 1.传递对象数据类型对于函数的调用者更加友好 2.在函数内部对象数据类型转换为字符串数据类型更加方便 */
    	</script>
    </body>
    </html>