Ajax工作原理及实例-CSDN博客

Ajax工作原理及实例

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

Ajax基本概念

Ajax(Asynchronous JavaScript And XML)，异步 JavaScript 和 XML，用于异步请求数据，在不刷新网页的情况下更新页面数据，提升用户体验

基本工作原理

注意：涉及到 AJAX 操作的页面“不能”使用文件协议访问（文件的方式访问）

安装用户代理（实例化 XMLHttpRequest()）
打开浏览器，输入网址
敲回车键，开始请求

// 1. 安装浏览器（用户代理）
   //  xhr 就类似于浏览器的作用（发送请求接收响应）
   var xhr = new XMLHttpRequest()
   // 2. 打开浏览器 输入网址
   xhr.open('GET', 'http://xxx/xxx.php') // 这里的 url 路径写你需要请求的地址
   // 3. 敲回车键 开始请求
   xhr.send()

对于上述代码，我们在控制台给 XMLHttpRequest 打印出来看看

XMLHttpRequest中有很多属性和方法，内容太多，不上图了，解释里面一部分

readyState

readyState有5个值，代表了Ajax请求状态

0：初始化，请求对象代理

1：open（）方法已经调用，建立一个与服务端特定端口的连接

2：已经接收到了响应报文的响应头getAllResponseHeaders()，但是还没有拿到响应体reponseText

3：正在下载响应报文的响应体，有可能为空，也有可能不完整

4：整个响应报文已经下载下来了，请求完成

下面上代码：

这里自己创建一个文件，作为请求用的，我这里创建的是time.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>readyState</title>
</head>
<body>
  <script>

    var xhr = new XMLHttpRequest()
    console.log('======readyState = 0======')
    console.log(xhr.readyState)
    // => 0
    // 初始化 请求代理对象

    xhr.open('GET', 'time.php')
    console.log('======readyState = 1======')
    console.log(xhr.readyState)
    // => 1
    // open 方法已经调用，建立一个与服务端特定端口的连接

    xhr.send()

    xhr.addEventListener('readystatechange', function () {
      switch (this.readyState) {
        case 2:
          // => 2
          // 已经接受到了响应报文的响应头

          // 可以拿到头
          console.log('======readyState = 2======')
          console.log(this.getAllResponseHeaders())
          // console.log(this.getResponseHeader('server'))
          // 但是还没有拿到体
          console.log(this.responseText)
          break

        case 3:
          // => 3
          // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
          // 在这里处理响应体不保险（不可靠）
          console.log('======readyState = 3======')
          console.log(this.responseText)
          break

        case 4:
          // => 4
          // 一切 OK （整个响应报文已经完整下载下来了）
          console.log('======readyState = 4======')
          console.log(this.responseText)
          break
      }
    })

  </script>
</body>
</html>

去控制台打印看看

readyState

onreadystatechange

这个事件并不是只在响应时触发，状态改变就触发

上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>onreadystatechange</title>
</head>
<body>
  <script>

    var xhr = new XMLHttpRequest()

    // 如果需要捕获第一个状态的变化，需要注意代码执行顺序的问题（不要出现来不及的情况）
    xhr.onreadystatechange = function () {
      // 这个事件并不是只在响应时触发，状态改变就触发
      console.log('======触发了onreadystatechange======')
      console.log(this.readyState)
    }

    xhr.open('GET', './time.php')

    xhr.send()

  </script>
</body>
</html>

去控制台打印出来看看

onreadystatechange

因为客户端永远不知道服务端何时才能返回我们需要的响应，所以 AJAX API 采用事件的机制（通知的感觉）

上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>onreadystatechange</title>
</head>
<body>
  <script>

    var xhr = new XMLHttpRequest()

    // 如果需要捕获第一个状态的变化，需要注意代码执行顺序的问题（不要出现来不及的情况）
    // xhr.onreadystatechange = function () {
    //   // 这个事件并不是只在响应时触发，状态改变就触发
    //   console.log('======触发了onreadystatechange======')
    //   console.log(this.readyState)
    // }

    xhr.open('GET', './time.php')

    xhr.send()

    // 因为客户端永远不知道服务端何时才能返回我们需要的响应
    // 所以 AJAX API 采用事件的机制（通知的感觉）
    xhr.onreadystatechange = function () {
      // 这个事件并不是只在响应时触发，XHR 状态改变就触发
      // console.log(1)
      if (this.readyState !== 4) return
      // 获取响应的内容（响应体）
      console.log(this.responseText)
    }

  </script>
</body>
</html>

此时已经能够接收完整的报文

reponseText

onload

onload是 HTML5 中提供的XMLHttpRequest v2.0 定义的，当页面完全加载完成后执行

上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>online</title>
</head>
<body>
  <script>

    var xhr = new XMLHttpRequest()

    xhr.open('GET', 'time.php')

    xhr.send(null)

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

  </script>
</body>
</html>

onload

setRequestHeader

设置一个请求头

var xhr = new XMLHttpRequest()

   xhr.open('POST', '/add.php') // 设置请求行

   xhr.setRequestHeader('Foo', 'Bar') // 设置一个请求头
   // 一旦你的请求体是 urlencoded 格式的内容，一定要设置请求头中 Content-Type 'application/x-www-form-urlencoded'
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

   xhr.send('key1=value1&key2=value2') // 以 urlencoded 格式设置请求体

Ajax优缺点

优点：

Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信
使用异步的方式与服务器通信，不打断用户的操作
可将一些后端的工作移到前端，减少服务器与带宽的负担
Ajax使得界面与应用分离，也就是数据与呈现分离

缺点：

Ajax干掉了Back与History功能，即对浏览器机制的破坏，在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑
对搜索引擎支持较弱

JQuery中的Ajax

$.ajax()方法

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             contentType: "application/x-www-form-urlencoded"
             async: true,
             cache: true,
             timeout: 5000,
             success: function (data) {},
             error: function () {},
             complete: function () {}
         });
    });
});

url

String类型，请求的地址

type

String类型，请求方式，一般为get或者post请求，但是http的其他请求当然也可以

timeout

Number类型，超时时间，单位为毫秒

async

Boolean类型，是否异步，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，设置为false

cache

Boolean类型，是否从浏览器缓存中加载请求信息，默认为true，表示会从浏览器缓存中加载请求信息

data

Object或者String类型，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式

dataType

String类型，希望服务器返回的数据类型，如果不是，就转化为指定的数据类型，如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

xml：返回XML文档，可用JQuery处理
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求
json：返回JSON数据
jsonp：JSONP格式
text：返回纯文本字符串

beforeSend

Function类型，表示发送数据之前，进行的操作，例如想在发送数据之前设置请求头

1
2
3

beforeSend: function(request) {
     request.setRequestHeader("Header", "x-www-***");
},

contentType

String类型，发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”

dataFilter

Function类型，过滤数据（预处理数据），例如时间格式的预处理等，2个参数，参数一：Ajax返回的原始数据，参数二：dataType参数

1
2
3

dataFilter: function (data, type) {
    return data
}

global

Boolean类型，默认为true，表示触发全局ajax事件，改为false则不会触发ajax全局事件

success

Function类型，请求数据成功回调，2个参数，参数一：必需，服务器返回后经过dataType参数处理后的数据，参数二：可选，描述状态的字符串

1	success: function (data, dataStatus) {}

error

Function类型，请求数据成功回调，3个参数，参数一：必需，XMLHttpRequest对象，参数二：必需，错误信息，参数三：可选，捕获的错误对象

1	error: function (XMLHttpRequest, status, error) {}

complete

Function类型，只要请求数据完成就回调，不管成功不成功，2个参数，参数一：必需，XMLHttpRequest对象，参数二：可选，描述请求类型的字符串

1	complete: function (XMLHttpRequest, status) {}

jsonp

String类型，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分

username

String类型，用于响应HTTP访问认证请求的用户名

password

String类型，响应HTTP访问认证请求的密码

Ajax工作原理及实例