ajax讲解

1. AJAX概述

1.1 什么是ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

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

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

• 与服务器异步交互

• 浏览器页面局部刷新

1.2 同步交互与异步交互

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

1.3 AJAX常见应用情景

当我们在百度中输入一个“白”字后，会马上出现一个下拉列表！列表中显示的是包含“白”字的关键字。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“白”字的关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把关键字显示在下拉列表中。

• 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

• 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

• 整个过程中页面没有刷新，只是局部刷新了；

• 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

1.4 AJAX核心（XMLHttpRequest）

其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。也就是说，我们只需要学习一个Javascript的新对象即可。

注意:

各个浏览器对XMLHttpRequest的支持也是不同的！

• 大多数浏览器都支持DOM2规范，都可以使用：var xmlHttp = new XMLHttpRequest()来创建对象；

• 但IE有所不同，

• IE5.5以及更早版本需要：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")来创建对象；

• IE6中需要：var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)来创建对象；

• 而IE7以及更新版本也支持DOM2规范。

ajax和服务端交互的一个过程

1、创建XMLHttpRequest对象

2、建立连接

3、发送请求

4、通过回调函数接收服务端的响应数据

1.4 AJAX的优缺点

优点：

• AJAX使用Javascript技术向服务器发送异步请求；

• AJAX无须刷新整个页面；

• 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

• AJAX并不适合所有场景，很多时候还是要使用同步交互；

• AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；

• 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

2. 使用jQuery实现Ajax

通过JavaScript书写AJAX方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题.而JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可,相比而言,JQuery实现AJAX更加简洁,方便.

2.1 $.ajax()

$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性:

语法:

$.ajax([设置参数]);

常用设置参数如下:

参 数	说 明
String url	发送请求的地址,默认为当前页地址
String type	请求方式(POST或者GET,默认为GET)
Number timeout	设置请求超时时间
Object data 或 String data	发送到服务器的数据
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
function beforeSend(XMLHttpRequest xhr)	发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
function complete(XMLHttpRequest xhr,String ts)	请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
function success(Object result,String ts)	请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,String em,Exception e)	请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
boolean global	默认为true,表示是否触发全局的AJAX事件

 ​

运行结果:

2.2 $.get()

$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法,具体语法如下:

  $.get(url,data,success(resp,status,xhr),dataType)

参数说明:

参 数	说 明
String url	必选,规定将请求发送到呢个url
Object data 或 String data	可选,规定发送给服务器的数据
function success(Object result,String status,XMLHttpRequest xhr)	可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

把$.ajax()的ajax请求修改为$.get()

2.3 $.post()

$.post()是jQuery封装的发送HTTP POST请求从服务器加载数据的AJAX方法,语法如下:

 $.post(url,data,success(resp,status,xhr),dataType);

参 数	说 明
String url	必选,规定将请求发送到呢个url
Object data 或 String data	可选,规定发送给服务器的数据
function success(Object result,String status,XMLHttpRequest xhr)	可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

3. JSON

3.1 什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

JSON是用字符串来表示Javascript对象，例如可以在Servlet中发送一个JSON格式的字符串给客户端Javascript，Javascript可以执行这个字符串，得到一个Javascript对象。

3.2 JSON对象语法

JSON 语法：

• 数据在名称/值对中

• 数据由逗号分隔

• 花括号保存对象

• 方括号保存数组

 var person = {"name":"zhangSan", "age":"18", "sex":"male"};
 alert(person.name + ", " + person.age + ", " + person.sex);

注意:

1. key要在双引号中,不能使用单引号

2. 字符串必须使用双引号表示，不能使用单引号

3.3 JSON序列化方法

在ES5中引用了JSON全局对象，该对象有两个常用的方法：

• parse方法：解析JSON字符串，转回对应的JavaScript类型；

   JSON.parse(text[, reviver])

  参数

  • text

  要被解析成 JavaScript 值的JSON字符串。

  • reviver 可选

  转换器，如果传入该参数 (函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。

  返回值

  Object 类型，对应给定 JSON 文本的对象/值。

  异常

  若传入的字符串不符合 JSON 规范，则会抛出 SyntaxError 异常。

   const json = '{"result":true, "count":42}';
   const obj = JSON.parse(json);
   ​
   console.log(obj.count);  //42
   ​
   console.log(obj.result); //true

• stringify方法：将JavaScript类型转成对应的JSON字符串；

   JSON.stringify(value[, replacer [, space]])

  参数

  • value

  将要序列化成 一个 JSON 字符串的值。

  • replacer 可选

  如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

  • space 可选

  指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为 10。该值若小于 1，则意味着没有空格；如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

  返回值

  一个表示给定值的 JSON 字符串。

  异常

  • 当在循环引用时会抛出异常TypeError ("cyclic object value")（循环对象值）

  • 当尝试去转换 BigInt 类型的值会抛出TypeError ("BigInt value can't be serialized in JSON")（BigInt 值不能 JSON 序列化）.

   console.log(JSON.stringify({ x: 5, y: 6 }));  //"{"x":5,"y":6}"
   ​
   console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)])); //"[3,"false",false]"
   ​
   console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
   //"{"x":[10,null,null,null]}"
   ​

3.4 JSON与XML比较

• 可读性：XML胜出；

• 解码难度：JSON本身就是JS对象（主场作战），所以简单很多；

• 流行度：XML已经流行好多年，但在AJAX领域，JSON更受欢迎。