2020-04-30

AJAX学习

AJAX

传统网站存在的问题

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

Ajax概述

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

应用场景

页面上拉加载更多数据，当下拉到底部并点击加载更多时才会向服务器发起请求并响应给用户。
列表数据无刷新分页，当从第一页切换到第二页时，只有列表中的数据才会变，头部和底部是不会发生变化的。
表单项离开焦点数据验证，当用户输入数据且该表单项失去焦点后，网页会自动将数据传给服务器进行验证，若已有该记录提示给用户。
搜索框提示文字下拉列表。

AJAX优缺点

浏览器可以从服务器同时请求多项内容，利用异步请求可以确保浏览器在后台工作，避免因完全页面刷新而中断用户的工作。

浏览器请求返回的速度会快得多，只是在有些情况下如此而已，请求和响应的速度取决于服务器返回的内容。AJAX页面完全有可能比传统页面的速度更慢。

不能够更真实的渲染颜色，因为颜色渲染由用户监视器控制而不是由用户支配。

只有页面真正改变部分会得到更新。

会减少服务器数据流量，利用AJAX可以建立更小更集中的请求。不过要当心……这也很容易导致建立更多的请求以至于增大数据流量，因为可能要一部建立所有这些请求。

页面的不兼容问题会更严重，由于除了XHTML外，AJAX页面还依赖于其它一些技术，所以使用AJAX后的兼容性问题实际会更严重。

Ajax运行原理及实现

原理

Ajax相当于浏览器发送请求与接收响应的代理人以实现在不影响用户浏览页面的情况下，局部更新数据，从而提高用户体验。

Ajax实现步骤

创建Ajax对象

var xhr = new XMLHttpRequest();
告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com')
发送请求

xhr.send();

获取服务器端给与客户端的响应数据。

1
2
3

xhr.onload = function(){
	console.log(xhr.responseText);
}

为避免ajax跨域请求，故用express开启一个后端服务。

//index.js文件
const express = require('express');
const path = require('path');
const app = express();

// 利用app.use拦截了所有请求，将请求交给express.static处理
// 也就是当网页请求该服务器时，请求全部转向public文件夹进行访问。
app.use(express.static(path.join(__dirname,'public')));

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

app.listen(3000);

console.log('服务器启动成功');

public/index.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>
        let xhr = new XMLHttpRequest();
        xhr.open('GET','http://localhost:3000/first');
        xhr.send();
        xhr.onload = function(){
            console.log(xhr.responseText);
        }
    </script>
</body>
</html>

服务器端相应的数据格式

在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。

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

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

请求参数传递

传统网站表单提交

<form method="get" action="http://www.example.com">
	<input type="text" name="username" />
	<input type="password" name="password">
</form>
<!-- http://www.example.com?username=zhangsan&passwor=123456 -->

Ajax中的get请求

xhr.open('GET','http://www.example.com?name=zhangsan&age=20');

post请求

1 2	xhr.setResquestHeader('Content-Type','application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

application/json

{name:’zhangsan’ , age: ‘20’ , sex: ‘男 ‘}

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

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

Ajax状态码

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

0：请求未初始化，还没调用open（）

1：请求已经建立，但是还没有发送（还没调用send（））

2：请求已经发送

3：请求正在处理中，通常响应中已经有部分数据可以用了。

4：响应已经完成，可以获取并使用服务器的响应了。

xhr.readyState //获取ajax状态码

onreadystatechange事件，当ajax状态码发生变化时将自动触发该事件。不过推荐使用xhr.onload方法。

Ajax错误处理

网络畅通，服务端能接收到请求，服务器返回的结果不是预期的结果。

可以判断服务器端返回的状态码，分别进行处理。xhr.status获取http状态码。
网络畅通，服务器没有接收到请求，返回404状态码。

检查请求地址是否错误。
网络畅通，服务器端能接受收到请求，服务器端返回500状态码。

服务器端错误，找后端程序员进行沟通。
网络中断，请求无法发送到服务器端。（模拟断网，可在浏览器中的network中将offline勾选即可）

会触发xhr对象下面的onerror事件，但不会会触发onload事件，在onerror事件处理函数中对错误进行处理。

封装Ajax函数

function ajax(options){
    // 存储的是默认值
    var default = {
        type: 'get',
        url: '',
        data: {},
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function(){},
        error: function(){}
                 
};
	// 使用options对象中的属性覆盖default对象中的属性
	Object.assign(default,options);
	// 创建ajax对象
	var xhr = new XMLHttpRequest();
    // 拼接请求参数的变量
    var params = '';
    // 循环用户传递进来的对象格式参数
    for(var attr in default.data){
        // 将参数转换为字符串
        params += attr + '=' + default.data[attr] + '&';
    }
    // 将参数最后的&截取掉
    // 将截取的结果重新赋值给params变量
    params = params.substr(0,params.length - 1);
    
    // 判断请求方式
    if(default.type == 'get'){
        default.url = default.url + '?' + params;
    }
	// 配置ajax对象
	xhr.open(default.type,default.url);
    // 如果是post请求
    if(default.type == 'post'){
        var contentType = default.header['Content-Type'];
          // 设置请求参数格式的类型
        xhr.setRequestHeader('Content-Type',contentType);
        if(contentType == 'application/json'){
            xhr.send(JSON.stringify(default.data))
        }else{
            xhr.send(params);
        }
    }else{
        // 发送请求
        xhr.send();
    }
	// 监听xhr对象上的onload事件
	// 当xhr对象接收完响应数据后触发
	xhr.onload = function(){
        // 获取响应头中的数据
        var contentType = xhr.getResponseHeader('Content-Type');
        // 服务器端返回的数据
        var responseText = xhr.responseText;
        // 如果响应类型中包含application/json
        if(contentType.includes('application/json')){
            responseText = JSON.parse(responseText);
        }
		if(xhr.status == 200){
           default.success(xhr.responseText,xhr);
        }else{
            default.error(xhr.responseText,xhr);
        }
	}
}

ajax({
	type: 'get',
	url: 'http://lcalhost:3000/first',
    data: {
      name: 'zhangsan',
        age:20
    },
    header:{
        'Content-Type': 'json'
    },
	sucess: function(data){
		console.log(data);
	},
    error:function(err){
        console.log(err);
    }
})

验证邮箱地址的唯一性

获取文本框并为其添加离开焦点事件
离开焦点时，检测用户输入的邮箱地址是否符合规则。
如果不符合规则，组织程序向下执行并给出提示信息。
向服务端发送请求，检测邮箱地址是否被别人注册。
根据服务端返回值决定客户端显示何种提示信息。

常用元字符

代码	说明
.	匹配换行符以外的任意字符
\w	匹配字母或数字或下划线
\s	匹配任意的空白符
\d	匹配数字
\b	匹配单词的开始或结束
^	匹配字符串的开始
$	匹配字符串的结束

常用限定符

代码/语法	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

以此举个例子如邮箱：Yuan.Yiuri691@ningmeng.com.cn
正则表达式为：^[A-Za-z0-9-._]+@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)\*(\.[A-Za-z]{2,6})$

创建过程：

开头和结尾：^$;
加入@：^@$;
@前的内容匹配：[A-Za-z0-9-._] 大小写字母，数字,”.”,下划线随机出现；”+” 号表示当前规则中的字符可以重复；
@后的内容受顶级域名的限制，按点号分割后的规则略有不同：(.[A-Za-z]{2,6}) 必须是字母出现，比如.com，.cn等

1
2

本文标题:AJAX学习

文章作者:陈楚吟

发布时间:2020-04-30, 11:04:57

最后更新:2020-06-18, 15:31:13

原始链接:http://yoursite.com/2020/04/30/AJAX学习/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。