Ajax

Posted 1877chl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax相关的知识,希望对你有一定的参考价值。

                                         Ajax
1.全局刷新和局部刷新的工作原理?
全局刷新:由浏览器负责将请求协议包推送到服务端,服务端将相应协议包推送到浏览器内存,导致浏览器原有数据被覆盖,导致展示时原有数据无法展示
局部刷新:由浏览器内存中的一个脚本对象代替浏览器将请求协议包发送到服务端,服务端返回响应包到脚本对象上,导致脚本对象内容被覆盖,但是浏览器内存其他地方没变,显示数据时只是将脚本对象内容更新;

2.ajax帮助开发人员管理浏览器中的【异步请求对象】比如:命令【异步请求对象】向服务器端发送请求协议包,  读取【异步请求对象】接收的响应数据

3.ajax开发步骤:
  1)在浏览器内存中创建一个脚本对象【异步请求对象】
  2)为【异步请求对象】添加【工作状态监听器】,帮助开发人员确认何时从【异步请求对象】身上获得服务端返回的响应数据
  3)初始化【异步请求对象】  
      1)通知【异步请求对象】采用何种方式发送【请求协议包】(get、post)
      2)通知【异步请求对象】本次要访问的资源文件地址
      3)通知【异步请求对象】在工作期间,浏览器是否等他(同步请求,异步请求)
  4)命令通知【异步请求对象】代替浏览器发送请求
总结;创建异步请求对象--》绑定事件--》初始化--》发送请求

4.同步请求和异步请求的区别:
同步请求(排队):在当前异步请求对象工作期间,浏览器只能处于等待状态,知道异步请求对象工作完毕,浏览器才可以委派其他异步请求对象发送请求
异步请求(并发):在当前异步请求对象工作期间,浏览器可以继续委派其他异步请求对象发送请求

5.ajax命令:(不能背)
  1)如何创建一个【异步请求对象】
     var xmlHttp=new XMLHttpRequest();
  2)如何为【异步请求对象】绑定【工作状态监听器】
     xmlHttp.onreadystatechange=function(){....}
  3)如何初始化【异步请求对象】
     xmlHttp.open("post/get","/myweb/oneservlet?username=smith",true)
  4)如何命令【异步请求对象】代替浏览器发送请求?
       xmlHttp.send();

6.异步请求对象工作状态:5种(背)
    1.readyState属性:存储当前的工作状态
    2.含义:
    xmlHttp.readyState         状态                                     发生位置
       0            异步请求对象已经被创建完毕            var xmlHttp=new XMLHttpRequest();
                
       1            异步请求对象已经被初始化完毕        xmlHttp.open("post/get","/myweb/oneservlet?username=smith",true)  

       2            异步请求对象已经发送了请求协议包,        xmlHttp.send();
                正常情况下,此时服务端正在处理这个请求

       3             异步请求对象已经接受到了服务端返回的响应
                包,此时异步请求对象正在解析响应体的数据

       4            异步请求对象已经解析数据完毕,此时数据是    开发人员可以提取响应数据了
                符合脚本数据的规范

7.如何从异步请求对象身上得到响应数据,进行局部刷新?
    xmlHttp.onreadystatechange=function(){
        //每当事件处理函数被调用时,需要询问异步请求对象当前的工作状态
        if(xmlHttp.readyState==4&& xmlHttp.status=200){//工作状态要为4并且服务端返回的状态码为200
            var data=xmlHttp.responsetext;
            callback(data)
        }
      };
//局部刷新实现函数
    function callback(param){
        $("div").text(param)
    }

8.获取服务器端返回的数据,使用异步对象的属性 responseText

以上是关于Ajax的主要内容,如果未能解决你的问题,请参考以下文章

从零开始学 Web 之 AjaxAjax 概述,快速上手

AJAX

Ajax及跨域

Django的日常-AJAX

jQuery中的Ajax以及请求函数

Ajax