Loading...
墨滴

CYF

2021/04/27  阅读:54  主题:默认主题

Ajax -- 阿贾克斯

img
img

1、什么是Ajax

1.1 传统网站中存在的问题

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

1.2 什么是Ajax

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

1.3 Ajax 的应用场景

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

举一个不是很恰当的栗子:

好比买房,我们需要跟楼主爸爸商讨各种各样的问题,但是往往楼主是很忙的,而且也没有那么多耐心替我们解决各种各样的问题,如:贷款。这就导致我们买房进展缓慢,着急的是我们啊

那怎么办呢?这时候,就需要中介了,他是连接我们和楼主之间的一个连接件,帮我们传递信息、解决问题,还可以把楼主爸爸减少一些琐事,这就极大地提高我们的买房效率,也减轻了楼主的工作量

所以,客户端就好比我们买房人,服务器端就好比楼主爸爸,而Ajax就是中介啦

简单来说,Ajax就是连接客户端和服务器端的一座桥梁

以前传统模式:

img
img

这种模式的就是一次性将页面的全部内容都请求过来,它的弊端就是导致服务器一次请求产生的压力过大,用户等待时间过长,体验很不佳,浏览器性能低下

使用Ajax模式:

img
img

服务器端通过Ajax 分批异步给客户端发送资源,当我们需要的时候再去请求过来,当我们在浏览页面拉到底部的时候,一些图片信息再显示出来,这就是在执行Ajax 请求

特别是在一些电商网站,图片视频是很消耗带宽的,必须使用Ajax来进行资源的请求

2、Ajax 基础

现在我们知道了,Ajax就是浏览器与服务器之间的一个代理人,在不影响用户浏览页面的情况下,局部刷新页面,提高网站性能和用户体验。

Ajax技术需要运行在网站环境中才能生效,我们需要在本地搭建一个Ajax环境,本文章使用Node常见服务器作为演示服务器

js提供了一个 XMLHTTPRequest对象来创建AjaxAjax 的原理就是通过 XMLHTTPRequest 对象服务器发起异步请求,从服务器获取数据,然后通过js操作DOM节点来更新页面

可以说,XMLHTTPRequest 对象就是 Ajax的核心

2.1 XMLHTTPRequest 对象

XMLHTTPRequest对象的方法

img
序号 方法 描述
1 abort() 取消当前响应,这个方法把XMLHttpRequest对象的readState状态值重置为0的状态;例如:在请求用了很长时间而且响应不再必要的时候,就可以调用这个方法
2 getAllResponseHeaders() 把HTTP响应头部作为未解析的字符串返回
3 getResponseHeader() 返回指定的HTTP响应头部的值
4 open() 初始化HTTP请求参数,设置 请求方式URL同步或异步
5 send() 发送HTTP请求
6 setRequestHeader() 向一个打开但未发送的请求设置或添加一个HTTP请求

XMLHTTPRequest对象的属性

img
img
序号 属性或事件 描述
1 readyState 属性 Ajax状态码,分别为0、1、2、3、4
2 onreadystatechange 事件 readyState状态码改变的时候触发该函数
3 status属性 由服务器返回的HTTP状态码,如200、404
4 statusText 属性 返回返回了与状态码相对应的状态名称;例如;200表示“OK”,404表示“NotFound”
5 responseXML 属性 对请求的响应,解析为XML并作为Document对象返回
6 responseText 属性 从服务器接收到的响应体作为文本字符串返回

readyState 状态值

img
img

2.2 Ajax 实现步骤

1、创建Ajax对象

let xhr = new XMLHttpRequest();

2、设置Ajax请求地址及请求方式

xhr.open('GET''http://127.0.0.1:3000/getData')

open():

  • 第一个参数:请求方式,GETPOST....
  • 第二个参数:请求的URL
  • 第三个参数:truefalsetrue表示异步请求,false 表示同步请求(可选,忽略默认是true

3、发送请求

xhr.send()

4、获取服务器的响应数据

// 当Ajax状态码发生变化时
xhr.onreadystatechange = function({
    // 当Ajax状态码为4时且服务器正常响应时
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);  // 获取响应体
    }
}

当然,只有异步才需要这么繁琐地检测状态码;如果是同步请求,直接接收服务器端返回的响应,因为脚本会在send() 之后停止并等待服务器端的响应

服务端

使用express 创建服务器

// 引入express框架
const express = require("express");

// 创建服务器
const app = express()

app.get('/getData'function(req, res{
    // 解决跨域问题
    res.setHeader('Access-Control-Allow-Origin''*')
    // 服务器端响应的数据
    res.send('我们已收到');
})

// 监听端口
app.listen(3000function({
    console.log('服务器已打开');
})

3、Ajax 运行原理

3.1 服务端相应的数据格式

服务器大多数情况下以JSON对象作为响应数据格式,客户端拿到JSON数据之后和html进行拼接,显示在网页上

http请求与响应中,无论是请求参数还是响应数据,如果是对象类型会转换为对象字符换进行传输

  • JSON.parse() : 将JSON字符串转换为JSON对象
  • JSON.Stringfy() : 将值转换为字符串,通常客户端要传输数据给服务端的时候,就先将JSON对象转化为字符串
let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function({
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 将字符串类型的响应数据转化为JSON对象
        let responseText = JSON.parse(xhr.responseText)
        let str = "<h2>" + responseText.text + "</h2>"
        document.body.innerHTML = str;  // 渲染到页面
    }
}

xhr.open('GET''http://127.0.0.1:3000/getData')
xhr.send()

由于onreadystatechange 是检测Ajax状态码的,所以 onreadystatechange事件一定要放在open() 之前

3.2 请求方式

open() 方法的第一个参数就是HTTP请求方式,常用的有GETPOSTHEAD等,任何服务器端支持的方法都可以。根据HTTP标准请求方法保持大写,否则一些浏览器可能无法处理请求

1、GET 请求

xhr.open('get''http://www.example.com?name=zxc&age=18');

发送的数据要像上面一样进行拼接

栗子:浏览器端发送数据给服务器,服务器再响应

浏览器端:

<p><input type="text" id="namer"></p>
<p><input type="text" id="song"></p>
<p><button>按钮</button></p>
let btn = document.querySelector('button')
let namer = document.querySelector('#namer')
let song = document.querySelector('#song')
btn.onclick = function({
    namer = namer.value;
    song = song.value;
    let params = 'namer=' + namer + '&song=' + song;
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function({
        if (xhr.readyState === 4 && xhr.status === 200) {
            let responseText = JSON.parse(xhr.responseText); // {"namer":"薛之谦","song":"刚刚好"}
            console.log(responseText);
        }
    }
    xhr.open('GET''http://127.0.0.1:3000/getData?' + params)
    xhr.send()
}

服务器端:

app.get('/getData'function(req, res{
    res.setHeader('Access-Control-Allow-Origin''*')
    res.send(req.query)
})
  • get请求要使用 query 属性来接收数据

2、POST请求

post请求方式较GET 比较复杂点

  • 首先它需要设置请求头
  • 其次它的数据是拼接完传给send() 方法
xhr.setRequestHeader('Content-Type''application/x-www-form-urlencoded')
xhr.send('name=zxc&age=18')

注意:

  • post请求的需要使用body属性来获取浏览器发送的数据
  • 另外需要引入包,进行设置,使req对象上面新增一个body属性;否则服务器端将无法接收到数据
const bodyParser = require('body-parser');
//对body-parser进行配置
app.use( bodyParser.urlencoded({extendedtrue}) )

栗子:

let btn = document.querySelector('button')
let namer = document.querySelector('#namer')
let song = document.querySelector('#song')

btn.addEventListener('click'function({
    namer = namer.value;
    song = song.value;
    var params = 'namer=' + namer + '&song=' + song;
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function({
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.open('post''http://localhost:3000/getData');
    // 设置请求头
    xhr.setRequestHeader('Content-Type''application/x-www-form-urlencoded');
    // 通过send() 将表单的参数发送给服务器端
    xhr.send(params);
})

3.3 请求参数的格式

请求参数的格式是在请求头设置的

xhr.setRequestHeader('Content-Type',  )

1、post请求的格式

格式:application/x-www-form-urlencoded

name=zxc&age=18%sex=girl

2、json格式

格式:application/json

// json对象
{name'zxc'age'18'sex'girl'}

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

4、兼容新问题

1、XMLHTTPRequest 对象

XMLHTTPRequest 对象具有兼容性问题,低版本中用 ActiveXobject

解决兼容性问题:

var httpRequest
if (window.XMLHttpRequest) {
    // Mozilla、Safari、IE7+
    httpRequest = new XMLHttpRequest(0)
else if (window.ActiveXObject) {
    // IE6及其之前
    httpRequest = new ActiveXObject('Microsoft.XMLHTTP')
}

2、onreadystatechange事件

onreadystatechangeonload 两种或群服务器端响应方式的区别:

区别描述 onload事件 onreadystatechange事件
是否兼容低版本 不兼容 兼容
是否需要Ajax状态码 不需要 需要
被调用次数 一次 多次
  • onload 只被调用一次,并且比较简单,一般情况下可以使用这个
  • onreadystatechange 当需要考虑兼容性的时候,就可使用这个

总结:

  1. Ajax是一种方法,介于浏览器和服务器知之间,可用于缓解服务器一次请求压力过大,实现页面局部更新
  2. onreadystatechange事件写在open() 之前,监视整个Ajax请求过程
  3. GET 请求和POST请求都使用send() 发送响应数据
  4. GET 请求发送的数据用 query属性获取,而POST请求则用 body属性获取
  5. 注意:POST请求需要设置请求头,并且服务器端需要配置环境

CYF

2021/04/27  阅读:54  主题:默认主题

作者介绍

CYF