原生Ajax

1. 什么是Ajax?

Ajax被认为是(AsynchronousJavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

Ajax = 异步 JavaScript 和XML。

Ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。

（注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。）

2. Ajax 概述

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

3. ajax的使用

1、 ajax的基本流程

2、创建ajax引擎对象

3、复写onreadystatement函数

4、判断ajax状态码

5、判断响应状态码

6、获取响应内容(响应内容的格式)

4. Ajax 运行原理及实现

4.1 Ajax 运行原理

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

4.2 Ajax 的实现步骤

1. 创建 Ajax 对象

var xhr = new XMLHttpRequest();

2. 告诉 Ajax 请求地址以及请求方式

     xhr.open(method,urL,async)

        async：设置同步代码执行还是异步代码执行
        
        true代表异步，默认是异步
        
        false代表同步

1. xhr.open('get', 'http://www.example.com');

2. xhr.open('post','add_hero.php');

3. 获取服务器端给与客户端的响应数据(注册事件)

//注册事件
xhr.onreadystatechange=function(){

   if(xhr.readyState==4 && xhr.status==200){

      var data = JSON.parse(xhr.responseText);

      if(data.result=='ok'){
                        
      }

    }

}

4. 发送请求

 xhr.send();

4.1 XMLHttpRequest对象方法

5. 服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

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

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

5.1 操作一下

方式一、

方式二、

6. 请求参数传递

6.1 GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

 然而，在以下情况中，请使用 POST 请求：

· 无法使用缓存文件（更新服务器上的文件或数据库）

· 向服务器发送大量数据（POST 没有数据量限制）

· 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

6.2 GET 请求方式

get的请求实体拼接在URL后面，？隔开，键值对

xhr.open('get', 'index.php?name=zhangsan&age=20');

提示：GET请求具有以下的几个特点：

· GET 请求可被缓存

· GET 请求保留在浏览器历史记录中

· GET 请求可被收藏为书签

· GET 请求不应在处理敏感数据时使用

· GET 请求有长度限制

· GET 请求只应当用于取回数据

6.3 POST 请求方式

使用setRequestHeader() 来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

//配置请求
xhr.open('post','add_hero.php');

//发送适合的请求头消息，以post方式发送需要设置
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//发送请求
xhr.send(`name=${name}&occupation=${occupation}&skill=${skill}&skin=${skin}`);

提示：POST请求的特点如下：

· POST 请求不会被缓存

· POST 请求不会保留在浏览器历史记录中

· POST 请求不能被收藏为书签

· POST 请求对数据长度没有要求

7. 获取服务器端的响应

7.1 Ajax 状态码

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

• 0：请求未初始化(还没有调用open())

• 1：请求已经建立，但是还没有发送(还没有调用send())

• 2：请求已经发送

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

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

xhr.readyState // 获取Ajax状态码

7.2 响应状态码:

status

200:表示一切OK

404:资源未找到

500：内部服务器错误

// 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {

     //判断Ajax状态码
     //数据成功接收，执行再有意义
     if (xhr.status==200) {

         // 获取服务器端的响应数据
         console.log(xhr.responseText);

     }

 }

7.3 onreadystatechange 事件

当 Ajax 状态码发生变化时将自动触发该事件。

在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了。

// 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {

     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {

         // 获取服务器端的响应数据
         console.log(xhr.responseText);

     }

 }

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: “OK” 403: “Forbidden” 404: “Page not found”
statusText	返回状态文本（例如 “OK” 或 “Not Found”）

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

当 readyState 为 4，status 为 200 时，响应就绪

8. 服务器响应属性

属性	描述
responseText	获取字符串形式的响应数据
responseXML	获取 XML 数据形式的响应数据

9.小实例

实例一（显示功能）

index.php

实例二、（增加功能）

add_hero.php

实例三、（修改功能）

显示编辑的英雄

显示当前英雄 （upd_hero.php）

编辑英雄

修改当前英雄 （upda_hero.php）

实例四、（删除功能）

删除当前英雄（del_hero.php）

注意：显示英雄代码记得调用函数并传值

修改功能、删除功能 会调用的哦！