Ajax详解

Posted Java阿吃

tags:

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

===》Ajax详解《===
Ajax详解

Ajax详解

Ajax特性


1
1、Ajax是什么?

Asynchronous javascript and xml :异步的JS和XML

Ajax详解
2
2、异步交互和同步交互

同步

--->发一个请求,就要等待服务器的响应结束。然后才能发第二个请求!中间这段时间就是一个字“卡”

--->刷新的是整个页面!!

异步

--->发一个请求后,无需等待服务器的响应,然后就可以发第二个请求!

--->可以使用JS结束服务器的响应,然后使用JS来局部来机新

Ajax详解
3
3、Ajax常见应用场景

百度搜索框

用户注册时(用户名是否已被注册)

Ajax详解
4
4、Ajax的优缺点

优点

--->异步交互;增强了用户的体验!

--->性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了

缺点:

    Ajax不能应用在所有场景!

    Ajax无端的增多了对服务器的访问次数,给服务器到来了压力!


Ajax详解
Ajax详解
Ajax发送异步请求(四步操作)
1
Ajax详解

*  Ajax其实只需学习一个对象:XMLHttpRequest,如果掌握了他,就掌握了Ajax!!

*  得到XMLHttpRequest

  •     大多数浏览器都支持:var xmlHttp=new  XMLHttpRequest();

  •     IE6.0:var xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");

  •     编写创建XMLHttpRequest对象的函数

functioncreateXMLHttpRequest(){

    try{

        return new XMLHttpRequest();

    }catch(e){

        try{

            return new ActiveXObject("Msxml2.XMLHTT                P");

        }catch(e){

            try{

            return new ActiveXObject("Microsoft.XMLHTT                P");

            }catch(e){

                 alert(哥儿们,你用的是什么浏览                            器???);   

                  throw e;

            }

        }

    }

}

Ajax详解


2
服务器连接

  ---xmlHttp.open();用来打开与服务器的连接,它需要三个参数:

        》请求方式:可以是GET或POST

        》请求的URL:制定服务器端资源,例如:/day1/AServlet

        》请求是否为异步:如果为true表示发送异步请求,否则为同步请求!

    ---xmlHttp.open("GET","/day1/AServlet",true);



3
发送请求

   ---xmlHttp。send(null);如果不给可能会造成部分浏览器无法发送!

            》 参数:就是请求体内容!如果是GET请求,必须给出null。

Ajax详解

4

  ---在xmlHttp对象的一个事件上注册监听器:onreadystatechange

        ---xmlHttp对象一共有5个状态:

            》0状态:刚创建,还没有调用open方法;

             》1状态:请求开始:调用了open方法,但还没有调用send()方法

               》2状态:调用玩了send()方法;

               》3状态:服务器已经开始响应,但不表示响应结束!

                》4状态:服务器响应结束!(通常我们只关心这个状态)

        ---得到xmlHttp对象的状态:

               》var state=xmlHttp.readState;//可能是0、1、2、3、4

        ---得到服务器响应的状态码

              》var status=xmlHttp.status;//例如200、404、500

        ---得到服务器响应的内容

                》var content =xmlHttp.responseText;//得到服务器的响应的文本格式的内容

                》var content =xmlHttp.responseXML;//得到服务器的响应的XML响应的内容,它是Document对象了!


xmlHttp.onreadystatechange=function(){//xmlHttp的5种状态都会调用本方法

    if(xmlHttp.readyState==4 && xmlHttp.status==200){//双重判断:判断是否为4状态,而且还要判断是否为200

        //获取服务器的响应内容

        var text =xmlHttp.responseText;

    }

};


Ajax详解

Ajax详解Ajax详解

Ajax详解Ajax详解

Ajax详解Ajax详解

Ajax详解Ajax详解

Ajax详解Ajax详解


Ajax详解
Ajax详解
第二例:发送POST请求(如果发送请求时需要带有参数,一般都用POST请求)


* open:xmlHttp.open("POST" ....);

* 添加一步:设置Content-Type请求头:

  > xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

* send:xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体


Ajax详解

Ajax详解Ajax详解

Ajax详解

Ajax详解
Ajax详解
第三例:注册表单之校验用户是否注册!

1编写页面:


  * ajax3.jsp

    > 给出注册表单页面

    > 给用户名文本框添加onblur事件的监听

    > 获取文本框的内容,通过ajax4步发送给服务器,得到响应结果

      * 如果为1:在文本框后显示“用户名已被注册”

* 如果为0:什么都不做!

22编写Servlet

  * ValidateUsernameServlet

    > 获取客户端传递的用户名参数

    > 判断是否为itcast

      * 是:返回1

      * 否:返回0


Ajax详解
Ajax详解


Ajax详解

Ajax详解Ajax详解

Ajax详解Ajax详解

Ajax详解Ajax详解


Ajax详解

Ajax详解



第四例:响应内容为xml数据

 * 服务器端:

    > 设置响应头:ContentType,其值为:text/xml;charset=utf-8

  * 客户端:

    > var doc = xmlHttp.responseXML;//得到的是Document对象!



Ajax详解


Ajax详解

Ajax详解

第五例:省市联动

11. 页面

  <select name="province">

    <option>===请选择省份===</option>

  </select>

  <select name="city">

    <option>===请选择城市===</option>  

  </select>

22. ProvinceServlet

  * ProvinceServlet:当页面加载完毕后马上请求这个Servlet!

    > 它需要加载china.xml文件,把所有的省的名称使用字符串发送给客户端!

33. 页面的工作

  * 获取这个字符串,使用逗号分隔,得到数组

  * 循环遍历每个字符串(省份的名称),使用每个字符串创建一个<option>元素添加到<select name="province">这个元素中

44. CityServlet

  * CityServlet:当页面选择某个省时,发送请求!

  * 得到省份的名称,加载china.xml文件,查询出该省份对应的元素对象!,把这个元素转换成xml字符串,发送给客户端

55. 页面的工作

  * 把<select name="city">中的所有子元素删除,但不要删除<option>===请选择城市===</option>

  * 得到服务器的响应结果:doc!!!

  * 获取所有的<city>子元素,循环遍历,得到<city>的内容

  * 使用每个<city>的内容创建一个<option>元素,添加到<select name="city">

Ajax详解



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

Ajax前后端交互利器详解

Ajax详解

Ajax详解

$.ajax()方法详解

jquery ajax 方法及各参数详解

Ajax-原生Ajax详解-同步与异步底层