`AJAX`

同步和异步

同步：必须等待当前事情完成之后，才能进行其他事情
异步: 不需要等待当前事情完成，同时进行，多件事情互不干扰

AJAX简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下，更新页面的数据。
如何查看自己电脑的IP地址

什么是`AJAX`

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

创建 `XMLHttpRequest` 对象（一）

XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
```
var xhr = new XMLHttpRequest();
```
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
```
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
```

创建 `XMLHttpRequest` 对象（二）

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

    // 判定当前浏览器是否支持 XMLHttpRequest 对象
    if (window.XMLHttpRequest) {
      
      
      xhr = new XMLHttpRequest();
    } else {
      
      
      // IE5 IE6
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

`readState-onreadystatechange`事件

onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪

status

200: “OK”
404: 未找到页面

    // onreadystatechange 监听state请求状态变化
    // state = 0 1 2 3 4
    // 0 请求为初始化
    // 1 服务器的连接已经建立
    // 2 请求已经被服务器接收到了
    // 3 服务器正在处理
    // 4 响应已经完成
    xhr.onreadystatechange = function () {
      
      
      // 200 在网络中表示请求响应成功
      // 404 路径错误
      // 401 未登录
      // 403 为授权
      // 500 服务器内部错误
      if (xhr.readyState == 4 && xhr.status == 200) {
      
      
        // 请求响应成功的操作
      }

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

    // 开启连接
    // xhr.open('GET','',boolean);
    // 第一个参数是请求方式 get、post
    // 第二个参数是请求地址
    // 第三个参数是一个boolean，true表示异步，false表示同步的请求
    xhr.open("GET", "http://192.168.43.142:3000/home/goods", true);
    // 发送请求
    xhr.send();

open（method,url,async）规定请求的类型、url、以及是否异步处理请求
- method：请求的类型，GET和`POST``
- url：文件在服务器上的位置
- async：true（异步）、false（同步）

send（string）将请求发送到服务器

String：仅用于POST请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var xhr = null;
    // 判定当前浏览器是否支持 XMLHttpRequest 对象
    if (window.XMLHttpRequest) {
        
        
      xhr = new XMLHttpRequest();
    } else {
        
        
      // IE5 IE6
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // onreadystatechange 监听state请求状态变化
    // state = 0 1 2 3 4
    // 0 请求为初始化
    // 1 服务器的连接已经建立
    // 2 请求已经被服务器接收到了
    // 3 服务器正在处理
    // 4 响应已经完成
    xhr.onreadystatechange = function () {
        
        
      // 200 在网络中表示请求响应成功
      // 404 路径错误
      // 401 未登录
      // 403 为授权
      // 500 服务器内部错误
      if (xhr.readyState == 4 && xhr.status == 200) {
        
        
        // 请求响应成功的操作
        // xhr.responseText 响应的结果 JSON格式的数组
        // console.log(xhr.responseText);
        var response = JSON.parse(xhr.responseText);
        console.log(response.data);
      }
    };
    // 开启连接
    // xhr.open('GET','',boolean);
    // 第一个参数是请求方式 get、post
    // 第二个参数是请求地址
    // 第三个参数是一个boolean，true表示异步，false表示同步的请求
    xhr.open("GET", "http://192.168.43.142:3000/home/goods", true);
    // 发送请求
    xhr.send();
  </script>
</html>

`GET`、`POST`区别

与POST 相比，GET更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用POST请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

get请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    /**
     * get 和 post 请求的区别
     * 1. get 请求会将请求的数据跟在浏览器地址栏的后边 ?
     * 2. get 请求会受到浏览器的限制，导致数据长度有限制
     * 3. get 请求不安全
     * 4. post 请求将数据放在请求体中
     * 5. post 安全的
     * 6. post 请求的数据大小是没有限制的
     */
    var xhr = null;
    if (window.XMLHttpRequest) {
        
        
      xhr = new XMLHttpRequest();
    } else {
        
        
      // IE5 IE6
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function () {
        
        
      if (xhr.readyState == 4 && xhr.status == 200) {
        
        
        // get 请求的结果
        var response = JSON.parse(xhr.responseText);
        console.log(response.data);
      }
    };
    // get 请求
    xhr.open(
      "GET",
      "http://192.168.43.142:3000/home/goods?type=pop&page=10",
      true
    );
    xhr.send();
  </script>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    /**
     * get 和 post 请求的区别
     * 1. get 请求会将请求的数据跟在浏览器地址栏的后边 ?
     * 2. get 请求会受到浏览器的限制，导致数据长度有限制
     * 3. get 请求不安全
     * 4. post 请求将数据放在请求体中
     * 5. post 安全的
     * 6. post 请求的数据大小是没有限制的
     */
    var xhr = null;
    if (window.XMLHttpRequest) {
        
        
      xhr = new XMLHttpRequest();
    } else {
        
        
      // IE5 IE6
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function () {
        
        
      if (xhr.readyState == 4 && xhr.status == 201) {
        
        
        // post 请求的结果
        var response = JSON.parse(xhr.responseText);
        console.log(response.data);
      }
    };
    // post 请求
    xhr.open("POST", "http://192.168.43.142:3000/user/login", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    // post 请求参数需要传入send方法中，而且是以 JSON 格式传递
    var loginInfo = {
        
        
      phone: 17602900172,
      password: "123456",
    };
    xhr.send(JSPN.stringify(loginInfo));
  </script>
</html>

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

books.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!--  Copyright w3school.com.cn -->
<!-- W3School.com.cn bookstore example -->
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul></ul>
  </body>
  <script>
    /**
     * 跨域：跨域(CORS)问题的产生
     * 1. 协议的不同
     * 2. ip 地址不同
     * 3，端口号不同
     * 跨域的解决方案
     * 1. 后端解决
     * 2. JSONP
     * 3. Proxy(代理)
     */
    var xhr = null;
    if (window.XMLHttpRequest) {
        
        
      xhr = new XMLHttpRequest();
    } else {
        
        
      // IE5 IE6
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function () {
        
        
      if (xhr.readyState == 4 && xhr.status == 200) {
        
        
        // get 请求的结果
        // console.log(xhr.responseXML);
        var doc = xhr.responseXML;
        var titles = doc.querySelectorAll("title");
        var str = "";
        for (var item of titles) {
        
        
          str += `<li>
            ${ 
          item.innerHTML}
            </li>`;
        }
        document.querySelector("ul").innerHTML = str;
      }
    };
    // get 请求
    // 这里应该是http请求 而不是file请求
    // 开启 Open with live Server
    xhr.open("GET", "./books.xml", true);
    xhr.send();
  </script>
</html>

在这里插入图片描述

学习了解 AJAX

`AJAX`

同步和异步

AJAX简介

什么是`AJAX`

创建 `XMLHttpRequest` 对象（一）

创建 `XMLHttpRequest` 对象（二）

`readState-onreadystatechange`事件

向服务器发送请求

`GET`、`POST`区别

服务器响应

猜你喜欢

学习了解 AJAX

AJAX

同步和异步

AJAX简介

什么是AJAX

创建 XMLHttpRequest 对象（一）

创建 XMLHttpRequest 对象（二）

readState-onreadystatechange事件

向服务器发送请求

GET、POST区别

服务器响应

猜你喜欢

`AJAX`

什么是`AJAX`

创建 `XMLHttpRequest` 对象（一）

创建 `XMLHttpRequest` 对象（二）

`readState-onreadystatechange`事件

`GET`、`POST`区别