Ajax和Json

认识Ajax

ASynchronous JavaScript + XML，异步 JavaScript 加 XML

• 什么是同步异步？

  • 同步：客户端必须等待服务器端的响应，在等待服务器处理请求期间，JS代码不会继续执行。
  • 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

• 使用Ajax技术的好处：在不刷新页面的情况下从服务器端获取数据，从而提升用户体验。

Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加入一个中间层（Ajax）引擎（XMLHttpRequest对象），使用户操作与服务器响应异步化。

并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给 Ajax 引擎自己来做，只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交情况。

Ajax工作流程

JS实现Ajax

• 1.创建 Ajax 引擎（XMLHttpRequest对象）
  

• 2.创建了Ajax引擎之后就需要和服务器端建立起联系，如何实现呢？

  • 通过上面Ajax的工作流程我们知道，大体分为以下两个步骤：

  • 1.向服务器发送请求

    • 如需向服务器发送请求，可以使用 XMLHttpRequest对象的 open( ) 和 send（）方法

		xmlhttp.open("GET","test1.txt",true);
		xmlhttp.send();

• 参数解释 ：
  

  • 请求类型选GET还是POST呢？

    • 与POST相比，GET占用资源少，发送请求速度快

    • 然后，在以下情况下，请使用POST请求：

      • 无法使用缓存文件（更新服务器上的文件或数据库）
      • 向服务器发送大量数据（POST 没有数据量限制）
      • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

    • 两者的区别：

      • get方式，请求参数在URL后边拼接。send方法为空参
        

      • post方式，请求参数在send方法中定义
        

  • 2.接受服务器响应，处理数据

    • 首先确定服务器是否响应成功？

    • 确定响应状态通过 XHR 对象的 readystate 和 status 属性

    • 每次 readysState 从一个值变成另一个值，都会触发 readystatechange 事件

    • 一般来说，我们只关心 readysState = 4
      

    • 当确定服务器响应成功后再获取

    • 获取方式：有两种方式（这里只说responseText 属性）
      
      Ajax的原生JS实现完整代码：

//1.创建核心对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
<--------------------------------------------------------------------->
        //2. 建立连接
        /*
            参数：
                1. 请求方式：GET、POST
                    * get方式，请求参数在URL后边拼接。send方法为空参
                    * post方式，请求参数在send方法中定义
                2. 请求的URL：
                3. 同步或异步请求：true（异步）或 false（同步）

         */
        xmlhttp.open("GET","ajaxServlet?username=tom",true);
<--------------------------------------------------------------------->
        //3.发送请求
        xmlhttp.send();
<--------------------------------------------------------------------->
        //4.接受并处理来自服务器的响应结果
        //获取方式 ：xmlhttp.responseText
        //什么时候获取？当服务器响应成功后再获取

        //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
        xmlhttp.onreadystatechange=function()
        {
            //判断readyState就绪状态是否为4，判断status响应状态码是否为200
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
               //获取服务器的响应结果
                var responseText = xmlhttp.responseText;
                alert(responseText);
            }
        }

---

JSON

JSON是为了解决XML过于冗余和啰嗦的问题，而提出来的一种数据格式。

• 语法规则：

  • JSON数据由键值对构成
  • JSON语法支持表示3中类型的值：简单值、对象、数组
  • 除此之外JSON没有变量、函数、对象实例的概念
  • JSON不是变成语言，只是借用了JS的语法，千万不要把它和JS语言混淆

• 简单值

  • 包括字符串、数值、布尔值和null
  • 与JS字符串的区别是，JSON字符串必须使用双引号

• 对象

  • 对象的属性名必须用双引号包围起来

JSON对象

JSON的流行很大程度上因为JSON可以直接被解析成可用的 JavaScript 对象。

• JSON对象方法
  • stringify（）
    • 在向服务器发送数据时一般是字符串
    • 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串
    • 对于要转换的JS对象，所有函数和原型成员都会在结果中忽略（JSON语法不支持）

JSON.stringify(object, , )

• 参数说明：

  • 第一个参数：要转换为 JavaScript 值的对象（通常为对象或数组）
  • 第二个参数：过滤器。用于过滤转换结果的键值对（可以是数组或函数）

          let book = {
              title: "Professional JavaScript",
              authors: [
                  "Nicholas C. Zakas",
                  "Matt Frisbie"
              ],
              edition: 4,
              year: 2017,
          };
          //第二个参数是数组：
          let jsonText = JSON.stringify(book, ["title", "authors"]);
          //{"title":"Professional JavaScript","authors":["Nicholas C. Zakas","Matt Frisbie"]}
  
  		//第二个参数是函数时：
          let jsonText = JSON.stringify(book, (key, value) => {
              switch (key) {
                  case "authors":
                      return value.join(",")
                  case "year":
                      return 5000;
                  case "edition":
                      return undefined;
                  default:
                      return value;
              }
          });
          //{"title":"Professional JavaScript","authors":"Nicholas C. Zakas,Matt Frisbie","year":5000}
          //值为 undefined 的属性会被跳过
  		
  

  • 第三个参数：控制转换结果的缩进和空格

• parse（）

  • 在接收服务器数据时一般是字符串

  • 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象

  • 如果说 stringify ( ) 是过滤函数（将JS对象转化为JSON格式），么 parse（ ）就是还原函数

  • 语法：

  	JSON.parse(text,reviver)
  

  • 参数说明：
    • text:必需， 一个有效的 JSON 字符串。
    • reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数