Ajax技术

Posted 2021-04-15 Lazy的笔记

注意：

本章会涉及到服务器端编程技术，比如php，对于只想学习jQuery写一些页面特效或者暂时没有学习过服务器

端编程的童鞋，本章可以先跳过！

大家如果需要学习PHP可以参考我之前的一套PHP基础课程：

Ajax技术（异步的javascript与XML技术）

作用：Ajax（阿贾克斯）是一种无需刷新页面即可实现客户端与服务器端数据交互的技术！

我们先一起来学习浏览器内置的原生Ajax API然后我们再学习如何通过jQuery封装的各种方法，方便的使用Ajax这项技术，从而实现客户端与服务器端的无刷新交互！

 

一、初探浏览器原生Ajax接口

    1、创建XHR对象

 我们整个Ajax技术的接口，核心是通过XMLHttpRequest这个对象（简称XHR对象）来完成！

 XHR对象怎么得到？

对于IE7+，谷歌，火狐，是通过XMLHttpRequest这个引用类型来创建出XHR对象!

 var xhr=new XMLHttpRequest();//得到XHR对象，变量名随便取

 对于IE7以下的ie浏览器创建出XHR对象的方法我们这边不做介绍，一个原因是jQuery后面为Ajax操作

提供了兼容各浏览器的方法，另一个原因是IE7以下的极地版本的IE浏览器，使用率已经非常低！

2、启用一个请求等待发送

调用open()方法并不会真正发送请求，而只是启动一个请求以备发送

//需要服务器

$(function(){

$('button').click(function(){

var xhr = new XMLHttpRequest();

xhr.open('get','test/a.html',true);

xhr.send(null);

});

});

1）'HTTP方法'

 比如get或者post 大小写无所谓

 GET请求应该用于从服务器端获取数据为目的

POST方式主要是为了将数据提交给服务器端并且存储（比如将数据提交到服务器端，且写入数据库）！

如果是动态的脚本（比如PHP）那么会在服务器端执行这个PHP文件，并且将其输出的内容返回给客户端！

3）是否异步发送请求的布尔值

true表示异步请求（默认），false表示同步请求

同步请求的特点

客户端提交请求->等待服务器处理（等待服务器端回应之前客户端不能做其他事情）->服务器端处理完毕返回给浏览器

即：浏览器在得到服务器端的数据回应之前，浏览器不能和用户有任何交互，后面的JavaScript 代码会等到服务器响应之后再继续执行！

异步请求的特点

 客户端提交请求（请求之后，可以继续去做其他事情）

 ->服务器进行处理（处理过程就像在后台完成一样，用户可能都感觉不到，还可以继续浏览网页中的内容并且交互，后面的

JavaScript 代码也会继续执行而不会等待异步请求的响应！）

处理完毕（处理完毕之后，浏览器会得到这个通知，然后可以执行对应的一些准备好的操作）

优点：在异步请求的过程中用户依然可以操作我们的页面内容，后面的js代码也会继续执行，而无需等待发起的请求的响应！

把客户端（浏览器）和服务器端比喻两个人，浏览器我们称作A，服务器端称作B

同步请求：

A到餐厅吃饭，点了一桌菜，约B来一起吃饭，约完之后，A就坐在餐厅一直等待，直到B到了，坐了下来，两人一起吃！

异步请求：

 A到餐厅吃饭，点了一桌菜，约B来一起吃饭，约完之后，A就直接拿起筷子吃了，边吃边等，B来了之后，拿起筷子吃！

4）最后两个参数是 服务器如果设置了需要认证请求，写上您在服务器端设置的用户名和密码（一般很少使用）

3、发送请求

XHR对象.send(要发送的数据);

 传入的参数作为主体内容发送给服务器！

如果不需要传主体数据，必须传入null，否则有些浏览器无法兼容！

4、如何获取服务器响应的数据

 在收到服务器端响应后，响应的数据会自动填充XHR对象的属性，部分属性和方法简介如下

  1）responseText：作为响应主体被返回的文本

 2）responseXML：如果响应的内容是XML格式的，就根据内容创建XML DOM对象以便操作（XML格式已经很少使用，所以这个属

              性现在也很少使用了）

 3）status：响应的HTTP状态（200表示成功，404表示未找到）

4）statusText：HTTP状态的说明

5）readyState：请求/响应过程的当前活动阶段，可能的值

 0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

2：发送。已经调用send()方法，但尚未接收到响应

3：接收。已经接收到部分响应数据

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了

6）readystatechange事件:

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件

 注：必须在调用open()之前指定readystatechange事件处理程序才能确保跨浏览器兼容性。

  对于readystatechange事件处理程序内部最好不要使用this来代表当前的xhr对象，因为有的浏览器会出现不可预知的问题，

 所以我们在处理程序内部就用XHR对象的变量名就好了。

7）abort()

取消当前正在执行的请求

5、设置http头部信息

我们在浏览器与服务器之间来回的传递数据，这些数据除了我们传递的主体数据之外，还会动加上一些http头信息

http头部信息

 为什么要传头部信息？主要就是告诉对方自己的能力，告诉对方主体内容的类型格式！

1）请求的头部信息(由浏览器发送给服务器端的http头部信息)

不同浏览器实际发送的头部信息会有所不同，下面列出的是常见的请求头部信息

Accept：浏览器能够处理的内容类型

Accept-Encoding：浏览器能够处理的压缩编码

Accept-Language：浏览器当前设置的语言

Accept-Charset：浏览器能够显示的字符集

Host：发出请求的页面所在的域

Referer：发出请求的页面的URI

User-Agent：浏览器的用户代理字符串，通过它我们在服务器端可以大致知道客户端是用的什么类型的浏览器

设置本次请求的头信息：

XHR对象.setRequestHeader()

 这个方法接受两个参数：头部字段的名称和头部字段的值（也可以发送自定义的头信息）

 注：要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

 2）响应头部信息（由服务器端发送给客户端的http头部信息）

XHR对象.getResponseHeader()

传入头部字段名称，可以取得相应的响应头部信息

getAllResponseHeaders()

包含所有头部信息的长字符串

   

6、向服务器发送数据

1）GET方式的请求

每个参数的格式：参数名称=参数值

符合?后面的格式的这个字符串，我们可以称作 查询字符串！

注：查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，否则可能会出现乱码的情况！

2）对于post请求，需将要传的数据传入send方法，并且符合相应的格式（这个符合格式的字符串我们称作查询字符串）

           比如：username=%E5%AD%99%E8%83%9C%E5%88%A9&sex=true，传入send方法！

                     和查询字符串一样，多个参数用&隔开，每个参数的名称和值也经过了encodeURIComponent()进行编码！

           注：我们使用ajax技术发起POST请求并且传递给服务器数据时，需要手动的做一些设置，服务器端才能顺利的接受到数据！

                  将请求的Content-Type头部信息设置为application/x-www-form-urlencoded

                  请求的Content-Type头部信息，表示告诉服务器发送的主体数据的内容类型（我们用post方式提交表单时默认就是采用这个

                  内容类型）！只有这样明确的告诉服务器端我们发送的主体数据的内容类型，服务器端才能合理的识别解析它们，且放入

                  $_POST变量中！

                  application/x-www-form-urlencoded这种内容类型形式上是这样子的：

                  username=%E5%AD%99%E8%83%9C%E5%88%A9&sex=true

           注：直接使用表单提交时这些操作，浏览器都帮我们自动做了，所以我们感觉不到！

7、处理服务器响应的数据

服务器端可以返回各种各样格式的数据，不同的数据格式，处理起来也是各不相同！

首先我们需要知道一点：

 服务器端响应数据，存放在XHR对象内的responseText这个属性里面，这个属性的数据类型是字符串！

但是我们一个字符串里面的数据格式可以有许多种不同的形式（数据格式）

1）html格式的数据

 html格式的数据即返回的数据本身就是html代码，这种数据使用起来比较直接，可以直接将其通过append之类的方法放到当前页面中 

var str='<div>helo</div>';

$('body').append(str);  

2）script格式的数据

字符串内直接就是js代码

即返回的数据直接就是javascript代码，可以使用js的eval函数来执行这个字符串中的代码

var str='alert("hello")';

eval(str);

3）xml格式的数据

是Ajax技术刚被提出是最常用的服务器端与客户端交互的数据格式，甚至ajax中的x指的就是xml，但是这种格式的数据书写麻烦，

使用不便，目前已经很少使用这个格式的数据进行交互。

4）json格式的数据

JSON格式的数据形式：

形式一：{"键名":值,...}

形式二：[{"键名":值},...]

JSON数据格式非常严格，主要的注意点：

键名称必须是用双引号括起来的字符串

值如果是字符串类型，那么也必须使用双引号括起来而不是单引号！

对于JSON格式的字符串，我们可以通过JSON.parse()方法将其转换为对象

注意：字符串必须符合JSON格式！

如果浏览器不支持JSON.parse这个方法可以使用eval函数来投机取巧一下！

注意：JSON格式的数据，大家要养成良好的习惯，将其写的标准！

var str = '{"username":"zhangsan","age":20}';

JSON.parse(str);

8、跨源请求

默认情况下，浏览器只允许向与本页面同源的服务器发起请求

JSONP（JSON with padding简写，参数式JSON的意思）技术

跨源 请求的目的：从不同的url下面的脚本请求数据！

在不同源的php文件那边将JSON格式的数据作为参数传给要调用的函数！

注意：只能是get方式

<script type="text/javascript">

 function sunshengli(data){

console.log(data);

}

</script>

<script type="text/javascript" ></script>

二、jQuery提供的Ajax快捷方法

jQuery定义了一整套操作Ajax的快捷方法，可以方便的执行常见的Ajax任务

1、$.get()方法

使用一个HTTP GET请求从服务器加载数据

jQuery.get(url[,data][,success(data,textStatus,jqXHR)][,dataType]);

参数说明：

 1）url（类型: String）

 发送请求的目标URL字符串

 2）data（类型：对象或者字符串）可选

发送给服务器的字符串或Key/value键值对

{id:10,name:"孙胜利"}

键与值无需进行url编码，jQuery自动帮我们做了这些小事情！

如果传入的是字符串（查询字符串），为保险起见，请自行将名称和值进行encodeURIComponent()处理！

3）success(data,textStatus,jqXHR) 可选

当请求完成并且成功后执行的回调函数

函数可以接受3个参数：

data：服务器端返回的数据

textStatus：请求得到的状态

jqXHR：对象，XHR对象的一个超集

它里面包含了原生XHR对象的所有成员，并且包含了其他的jQuery方法！

4）dataType（类型：字符串）可选

从服务器返回的预期的数据格式，不同数据格式，jQuery对它们的默认处理处理起来也是不一样的。

默认：智能猜测（可能是html，script，json，xml 中的一种）

智能猜测是根据响应的Content-Type头信息来猜测：

text/html：html格式

application/x-javascript或者text/javascript：js代码

application/json或者text/json：json格式

如果服务器端没有指定对应的响应头部信息，则我们在客户端可以通过该参数来强行指定jQuery将返回的数据当成是指定的格式来处理！

可以设置的值：html，script，json，jsonp，xml

注：如果要设置该值，我们最好传入上面的回调函数，否则无效！

2、$.post()方法

使用一个HTTP POST 请求从服务器加载数据

参数，使用方式同上！

 3、load()方法

从服务器载入数据并且将返回的 HTML 代码替换 匹配的元素 的后代元素

load(url[,data][,complete(responseText, textStatus,jqXHR)])

1）如果提供了 "complete" 回调函数，它将在请求处理完之后，并且 HTML 已经被插入完时被调用。

回调函数会在每个匹配的元素上被调用一次，并且 this始终指向当前正在处理的 DOM 元素

2）默认使用 GET 方式 ， 如果data参数提供一个对象，那么使用 POST 方式

3）如果 url 参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是 jQuery 的选择器，从而决定应该加载返

 回结果中的哪部分内容

4、$.getScript()方法

使用一个HTTP GET请求从服务器加载并拿到当前页来执行一个 JavaScript 代码

url（类型: String）

一个包含发送请求的URL字符串

success(script,textStatus,jqXHR)

类型: Function()

当请求成功后执行的回调函数

5、$.getJSON()方法

使用一个HTTP GET请求从服务器加载JSON格式的数据

$.getJSON(url[,data ][,success(data, textStatus, jqXHR)])

附加知识：跨源请求

jQuery对于JSONP的支持相当方便，我们只需要在使用getJSON方法时在URL的查询字符串中添加callback=?即可

jQuery会自动生成一个随机名字的回调函数，并使用它和服务器进行通信，如此简单的即可实现跨域请求！

    

知识补充：从jQuery 1.5开始，jQuery提供的所有的Ajax方法（比如我们上面讲的方法，以及后面还没有讲到的jQuery提供的Ajax方法）都会返回一个XHR对象的超集，我们可以简称为jqXHR对象，它里面不仅包含了XHR对象的成员，还包含一些jQuery添加的其他方法，比如：

      done(function(data, textStatus, jqXHR) {})传入请求成功之后执行的函数

      fail(function(jqXHR, textStatus, errorThrown) {})传入请求失败之后执行的函数

      always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { })传入请求完成之后执行的函数

三、jQuery提供的Ajax底层接口

    jQuery还提供了底层Ajax方法，底层是相对于上面的快捷方法而言的，意味着我们可以对发起的Ajax请求进行更详细的配置！

    1、$.ajax()方法   

jQuery为Ajax提供的底层API中核心方法就是ajax方法

1）使用$.ajax()方法发起请求

                success:function(){}

           });

           第二个参数是键值对象可以为本次请求进行配置

                这个键值对象可以配置的选项比较多，我们接下来和大家一起讲解！

                我们只传了一个success选项表示请求成功完成时执行的回调函数

                类型: Function(data,textStatus,jqXHR)

2）设置请求的url

           $.ajax({

                success:function(){}

           });

3）设置请求的HTTP方式

           配置对象中传入type属性或者method属性来设置请求的HTTP方式

           type（类型: 字符串）

           method（类型: 字符串）

           注：如果你使用jQuery 1.9.0 之前的版本，你必须使用type选项而不能使用method选项

4）设置向服务器传递的数据

           配置对象中传入data属性

           发送到服务器的数据。对象将自动进行url编码且转换为查询字符串格式！

           如果传入的是字符串（查询字符串），为保险起见，请自行将名称和值进行encodeURIComponent()处理！

5）设置在Ajax请求发起之前执行回调函数

           配置对象中传入beforeSend属性指定在Ajax请求发起之前执行的函数

           作用：它提供了在请求发出前，最后配置本次请求的机会！

           类型: Function( jqXHR, settings)

           第二个参数一个配置对象，可以传入修改的配置属性以及值从而覆盖之前的配置对象对应的属性

           若在beforeSend函数中返回false将取消这个请求

6）设置Ajax请求完成后（无论是否成功）执行的回调函数

           配置对象中传入complete属性来设置

           类型: Function(jqXHR,textStatus)

                    textStatus描述请求状态的字符串

           可以接受一个函数数组。每个函数将被依次调用

7）设置Ajax请求失败之后执行的回调函数

           配置对象中传入error属性

           类型: Function(jqXHR,textStatus,errorThrown)

                    textStatus描述请求状态的字符串

                    errorThrown 接收HTTP状态的文本部分，比如： "Not Found"（没有找到）

           注意：此处理程序在跨域脚本和JSONP形式的请求时不被调用

           可以接受函数组成的数组。每个函数将被依次调用    

8）设置Ajax请求成功之后执行的回调函数

           配置对象中传入success属性

           类型: Function( data,textStatus,jqXHR)

                    data：从服务器返回的数据（且根据dataType参数进行处理后的数据）

           可以接受函数组成的数组。每个函数将被依次调用

9）设置服务器返回数据的预期数据格式

           配置对象中传入：dataType属性（可设置值："xml"、"html"、"script"、"json"、"jsonp"、"text"）

           如果不指定，jQuery 将自动根据 HTTP 头信息Content-Type来智能判断

           如果设置了此属性，jQuery就会将服务器返回的数据看成是这个格式的数据进行一些对于的转换操作，而忽略服务器响应数据声

           称的数据格式，若设置为"jsonp"则：会自动在所请求的URL最后添加 "callback=?"，?就是客户端回调函数的名字，是自动的我

           们无需另外设置，在服务器端只需要返回调用该函数并传入json格式数据的的js代码即可！

10）设置Ajax请求相关回调函数的上下文

   配置对象传入：context

   这个属性的值会成为事件处理函数内this变量的值

11）设置Ajax请求超时时间

   配置对象传入：timeout（类型: Number）

   指定请求超时选项（单位ms）。若请求超时，则jQuery自动调用error回调函数，并把status参数的值设置为timeout

12）设置Ajax请求是否以异步方式发出

   配置对象中传入：async

   指定Ajax请求是否以异步方式发出，默认值为true

   注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行

13）设置是否缓存服务器返回的数据

   配置对象中传入：cache（类型：布尔值）

   若设置为false，则不缓存服务器响应的数据。

   默认情况下，只有在请求script或者json数据时默认值是false，其他情况默认值都是true

14）设置处理服务器返回数据的回调函数

   配置对象中传入：dataFilter属性

   类型: Function( String data, String type ) => Anything

 data是Ajax返回的原始数据

 type是调用jQuery.ajax时提供的dataType参数

   将处理好的数据，return即可,若不将数据return则其他的事件处理函数（比如success）接受不到数据！

   该属性通常用在，如果服务器返回的数据格式与我们需要的不匹配（比如包含一些不需要的数据），这功能就派上用场了

15）控制数据格式转换

   配置对象中传入：converters（类型：对象）

   默认: 返回的是html格式则不做处理，若是json格式则转为对象，xml格式则转为xml对象！

    传入对象内：设置"text html"属性，传入函数来设置对服务器返回的html格式的数据进行转换

设置"text json"属性，传入函数来设置对服务器返回的json格式的数据进行转换

函数接受一个参数，是服务器返回的未经转换过的数据(或是由dataFilter修改过的数据)，我们转换成的数据

直接return即可,若不将数据return则其他的事件处理函数（比如success）接受不到数据！

16）设置是否触发全局Ajax事件处理函数

   配置对象中传入：global (默认: true)

   类型: Boolean

   设置为 false 将不会触发全局 AJAX 事件

$.ajax()方法还有其他的一些配置选项，几乎很少使用，这边不作介绍！

2、Ajax请求全局设置

    1）$.ajaxSetup()方法

为以后要用到的Ajax请求设置默认的值

参数：一个用来配置Ajax请求的"{键:值}"对，属性同$.ajax()方法的配置对象中的属性

    2）全局Ajax事件方法

直接在$.ajax()方法内设置的事件处理函数仅对当时ajax请求有效，我们还可以设置一系列“全局”（针对所有Ajax请求）的处理函数

以下方法仅允许在document对象上调用

ajaxComplete：

   在Ajax请求完成之后执行的函数

   Function(event,jqXHR,ajaxOptions )

        ajaxError：

   在Ajax请求失败后执行的函数

   Function( event, jqXHR, ajaxOptions, thrownError )

        ajaxSend：

   在Ajax请求开始之前执行的函数

   Function(event, jqXHR, ajaxOptions)

        ajaxStart：

   在Ajax请求开始时执行的函数

   Function()

        ajaxStop：

   在Ajax请求完成之后执行的函数

   Function()

ajaxSuccess：

   在Ajax请求成功完成之后执行的函数

   Function(event,jqXHR,ajaxOptions,data)

四、jQuery提供的Ajax辅助方法

    1、$.param()方法

返回用于URL查询字符串或Ajax请求（即会自动url转码，序列化）

$.param()

    2、serialize()方法

表单jQuery对象.serialize()

一次性得到表单的所有数据,且对名称和值url编码，序列化，用于Ajax请求发生非常方便！

    3、serializeArray()方法

表单jQuery对象.serializeArray()

将表单转换成数据对象！