一、浏览器在接收到服务端数据后，两种表现形式

  1. 浏览器全局刷新：服务端返回数据，将浏览器内存中原有的数据，进行更新，此时浏览器展示给用户的只能是相应的结果，无法展示请求发送之前的页面内容；
  2. 浏览器局部刷新：服务端返回的数据，只会对浏览器部分[标签]的内容进行更新，此时浏览器既可以展示得到相应数据，同时也可以展示发送请求之前的绝大部分的内容。

二、浏览器接收到服务端数据后，两种表现实现原因

  1. 浏览器全局刷新：如果发送请求时，是由浏览器直接向服务器发送请求，此时服务端将响应结果也直接推送到浏览器的内存中，导致浏览器内存中原有的数据被覆盖；
  2. 浏览器局部刷新：在发送请求时，并不是由浏览器直接向服务器发送请求，由浏览器委托一个[异步请求对象]向服务端发送请求，此时服务端将响应结果推送给[异步请求对象]，流浪器内存中内容并没有被覆盖掉，最后[异步请求对象]将得到的结果更新到页面对应的标签中。

 三、 同步与异步

         例如：接力跑，在比赛开始后，第一棒选手只有把接力棒交给第二位队员，第二位运动员才能开始跑，以此类推，当前一位运动员还没有把接力棒交接给下一位远动员，则下一位运动员就不是跑，只有当前一位运动员把接力棒交给下一位运动员，下一位运动员才能跑；

         例如：用社交软件聊天，在你发送一个消息给对方后，对方没有会信息，此时你可以发第二条，第三条，也可以去坐其他事情；

  1. 同步：客户端与服务器端的请求与响应是一个过程的，也就是说在过程完成前客户端都处于等待卡死状态；
  2. 异步：客户端发送请求，无论服务器是否响应，客户端都可以随意做其他事情。

四、 加载异步数据

    1. 开发步骤 

  •         在浏览器内存中，创建一个[异步请求对象]
  •         为[异步请求对象]设置[工作状态监听器]，来帮助浏览器在合适的时机，从[异步请求对象]读取服务端返回的响应数据
  •         初始化[异步请求对象]，（请求方式（post/get），请求地址，同步或异步标识）
  •         命令[异步请求对象]发送请求
  •         通过[工作状态监听器]，在合适时机得到[异步请求对象]返回的数据，对浏览器指定的标签内容进行更新，从而实现[局部刷新效果]

    2. 传统的JavaScript方法

var xmlHttp = new XMLHttpRequest();//创建异步请求对象[XMLHttpRequest]
xmlHttp.onreadystatichange = function(){//添加工作状态监听器
    if(xmlHttp.raadystate == 4){//判断是都是合适时机
        var 响应数据 = xmlHttp.responseText;//读取服务端响应得数据
        dom对象.value = 响应数据;//将响应的数据更新到指定位置
    }
};
xmlHttp.open(“get”, “/myWeb/one”, true);//初始化[异步请求对象]，发送请求方式（get/post）,请求路径，同步或异步标识
xmlHttp.send();//命令[异步请求对象]发送请求

属性

描述

onreadystatechange

存储函数 (或函数名), 每当 readyState 属性改变时, 就会调用该函数

readyState

存有 XMLHttpRequest 的状态。

0    异步请求对象已经被创建完毕

1    异步请求对象已经被初始化完毕

2    异步请求对象已经将请求发送出去，此时服务端应该正在处理这个请求

3    异步请求对象已经接收到了服务端返回的响应数据，异步请求对象正在翻译接收到的数据

4    异步请求对象将所得到的数据翻译成javaScript脚本数据，这个数据是可以直接拿来使用的

status

200:“OK” 404:“页面未找到” 500:“服务器错误”…


    3. 异步请求与同步请求的区别

  • 异步请求:在[异步请求对象]工作期间，浏览器处于工作状态，此时浏览器不需要等待[异步请求对象]返回数据。
xmlHttp.open(“get”, “/myWeb/one”, true);
  • 在[异步请求对象]工作期间，浏览器处于等待状态，此时浏览器会等到[异步请求对象]返回数据后，才会做其他的事情。
xmlHttp.open(“get”, “/myWeb/one”, false);

    4. 请求服务器数据

        $.get() & $.post() 请求数据

$.get(
         “url”,
         ”请求参数”/{参数名：值},
         局部刷新函数对象,
         “dataType”
)
$.post(
         “url”,
         ”请求参数”/{参数名：值},
         局部刷新函数对象,
         “dataType”
)

 

         $.ajax()使用

在jQuery中，$.ajax()是最底层的方法，也是功能最强的方法，$.get()和$.post()都是在此方法的基础之上建立的，语法格式如下：

$.ajax([option])

其中可选参数[option]为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也包含服务器响应后回调的数据，具体参数列表如下：

参数名

类型

描述

url

String

发送请求的地址（默认为当前页面）

type

String

数据请求方式（post或get），默认为get

data

String或Object

发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方式，那么，该字符串将附在url的后面

dataType

String

服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行分析，传递给回调函数，其可用类型有：

html：返回纯文本的html信息，包含的Script标记会在插入页面时被执行

script：返回纯文本的JavaScript代码

text：返回纯文本字符串

xml：返回可被jQuery处理的xml文档

json：返回JSON格式的数据

beforeSend

Function

该函数用于发送请求前修改XMLHttpRequest对象，其中的参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件

complete

Function

请求完成后调用的回调函数，该函数无论数据发送成功与否都会调用，其中有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，用于描述成功请求类型的字符串

success

Function

请求成功后调用的回调函数，该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据，另外一个是strStatus，用于描述状态的字符串

error

Function

请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject

timeout

Number

请求超时的时间（毫秒），改设置将覆盖$.ajaxSetup()方法中的同样设置

global

Boolean

是否响应全局事件，默认为true，表示响应，如果设置成false，表示不响应，那么，全局事件$.ajaxStart等将不响应

async

Boolean

是否为异步请求，默认为true，表示是异步请求，如果设置成false，表示是同步请求

cache

Boolean

是否进行页面缓存，true表示进行缓存，false表示不进行缓存

五、ajax示例（下拉列表联动）