Ajax的使用

Ajax(Asynchronous Javascript and XML)(其中Asynchronous代表异步)

同步于异步是描述通信模式的概念，同步机制：发送方发生请求后，需要等待接收到接收方的响应后，才能处理其他的业务。异步机制：发送方发生一个请求后，可以接着处理其他业务，不需要等待。同步机制主要是为了保证数据的一致性，异步主要是为了提高效率。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

★作用：

在网页不刷新的情况下向服务端发送HTTP请求后得到HTTP响应，只有触发事件之后才加载或返回里面的内容，实现了一个懒加载的功能。

★XML简介：

Xml 可扩展标记语言；

Xml 被设计用来传输和存储数据；

Xml 和 HTML 类似，不同的是 HTML重都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

<name>中国</name>
  <province>
    <name>黑龙江</name>
    <citys>
      <city>哈尔滨</city>
      <city>大庆</city>
    </citys>  　　
  </province>
  <province>

★JSON简介：

JavaScript Object Notation(JavaScript 对象标记法)

JSON灵活度远远胜于XML，都用JSON传了！

JSON 是一种轻量级存储和交换数据的格式；

JSON 具有自我描述性易于理解；

JSON 是通过 JavaScript 对象标记法书写的文本。

{
    name: "中国",
    provinces: [
        { 
            name: "黑龙江", 
            citys: { 
                city: ["哈尔滨", "大庆"]
            }
        },
    ]
}

可用于交换数据

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本；

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器；

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象；

以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

发送数据

如果您的数据存储在 JavaScript 对象中，您可以把该对象转换为 JSON，然后将其发送到服务器。

接收数据

如果您以 JSON 格式接收到数据，您能够将其转换为 JavaScript 对象。

存储数据

在存储数据时，数据必须是某种具体的格式，并且无论您选择在何处存储它，文本永远是合法格式之一。

★优点：

1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

★缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

★效果案例：

搜索完之后可以看到相关的关键字提醒！

注册检测用户名是否重复！

在断开网络的情况下选择购物分类不返回东西，只有联网才返回东西，用则加载不用则不加载！

加载内容往下滚（事件）触发了才会继续加载！

包括在线作图网站每绘制一个图像或者每改变图像的一个位置都会向服务端发送一个请求！

★工作原理：

有人会问，图片中的“XHR”是什么东东？

所谓的“XHR”（浏览器内置对象”XMLHttpRequest ”），也就是Ajax功能实现所依赖的对象，AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的，异步请求不会妨碍客户端的任何操作。

异步：

XHR相当于是一个通信兵，来负责客户端与服务器之间的通信传输。举个形象生动的例子：

要打仗了，前方阵地（客服端）不可能只等着通信兵（XHR）传递消息其他什么也不干吧，所以前方阵地还在干着自己的事情然后派通信兵去请求后方指挥部（服务器）的命令，指挥部下达命令指挥，通信兵再把命令传到前方阵地，然后前方阵地再执行命令相关的操作（客户端把数据渲染到页面），这也就是Ajax的异步原理。

同步：

所谓的同步就是前方阵地和通信兵一起去向服务器请求数据，直到通信兵请求到数据，我才开始渲染页面，在请求的过程中页面一直是白屏等待的。

AJAX既然是通过浏览器的内置对象XMLHttpRequest来处理异步请求的那我们先来了解下他又哪些方法和属性：

注：写在这里的为必选参数或者经常用到的可选参数。

方法：

一、open();

解释：发送请求的页面在不刷新的情况能将参数传给一个服务器进行处理, 这个方法就是将这些个参数传送过去

参数:

1, method:用于指定请求的类型 "GET"或者"POST"

2, url:用于请求的地址, 可相对可绝对

3, asyncFlag:指定请求方式为同步还是异步, true为异步, false为同步

二、send();

解释：这个东西就是将一些参数以键值对的方式传送给服务器, 异步的话将立即返回服务器的响应, 做到不刷新页面进行数据处理就是用来发送参数的, GET方法下可以在url的后面写上参数的值, POST方法下只能在send()方法里面写上参数的键值对

三、setRequestHeader("header","value")

解释：用于为请求的Http头设置值

四, getResponseHeader("headerLabel");

解释: 返回设置的Http头信息

五, abort();

个人理解: 使用了这个请求之后会直接停止getResult的回调函数, 让readyState属性的返回值直接为0

六, getAllResponseHeaders();

解释：以字符串的形式返回完整的字符串信息

属性：

一, onreadystatechange

解释: 用于指定状态改变时所触发的事件处理器（在设置回调函数的时候经常用到, 所有的状态改变的时候都会触发这个事件处理器）

二, readyState

解释: 用于获取请求的状态（通过返回的代码是多少来判断当前的状态是什么情况）

返回值有：0: 未初始化; 1: 正在加载; 2:已加载; 3:交互中; 4:完成

三, responseText

书上解释: 获取服务器的响应, 表示为字符串（response.getWrite().append("");将这个语句的内容返回到用户页面）

四, responseXML

解释: 用于获取服务器的响应, 表示为字符串

五, status

返回Http状态码——200:表示成功; 202:表示请求被接受, 但尚未成功; 400:错误的请求; 404:文件未找到; 500:内部服务器错误

六, statusText

返回Http状态码的文本信息

HHTP协议

HyperTextTransferProtocol 超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则，约定。

请求报文：

格式与参数

以百度查询为例

行 get/post /s?ie=utf-8 HTTP/1.1

头 Host:baidu.com

Cokkie:name=百度

Content-type:application/x-www-form-urllencoded

User-Agent:chrome 83

空行

体 username=admin&password (如果是get这里为空)

响应报文：

行 HTTP/1.1（协议版本） 200 OK (状态码 200（响应成功！） 404 403 401 500)

头 Content-Type:text/html;charset=utf-8

Content-length:2048

Content-encoding:gzip

空行

体↓

<html>

　　<head>

　　</head>

　　　　<body>

　　　　　　<h1>ajax</h1>

　　　　</body>

</html>

百度get请求看Network

纯JS原生实现Ajax我们不去讲解这里，直接使用jquery提供的，方便学习和使用，避免重复造轮子

jQuery.ajax(...)
      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

使用教程：

posted @ 2021-08-26 02:54 Sakimir 阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

Sakimir