码迷,mamicode.com
首页 > Web开发 > 详细

AJAX

时间:2018-02-27 23:47:45      阅读:477      评论:0      收藏:0      [点我收藏+]

标签:rip   页面   属性   一模一样   form   else   利用   sync   内容   

一、什么是AJAX?

  1.英文全称Asynchronous JavaScript And XML,翻译为中文就是异步的JS和XML技术

  2.是用来改善用户体验的技术,提高用户的体验度。

  3.AJAX的本质是利用浏览器内置的一个特殊对象(XMLHttpRequest),异步的向服务器发送请求。服务器一般只需要返回部分数据,

  浏览器利用这些数据进行布局的更新,整个过程页面无刷新,不打断用户操作,提高用户体验度。

 

  传统的注册:1.销毁当前提交表单的页面,如果失败,就会返回一个新的和之前一模一样的页面,但是数据需要全部重新填写,新页面上什么也没有。

        2.此时如果网络通信比较差,我们表单提交的数据提交到服务端又没有返回新的页面,此时用户只能处于等待状态,什么事情也做不了。

          (因为提交表单会把当前页面进行销毁,而因为网络原因服务端还没有返回新的页面。)

         3.传统做法因为需要返回一个新的页面,导致消耗了大量的网络资源。

二、如何获取AJAX对象?

  function getXhr(){

    var xhr=null;

        if(window.XMLHttpRequest){

          xhr = new XMLHttpRequest();

        }else{

          xhr= new ActiveXObject("Microsoft.XMLHttp");          

         }

    return xhr;

  }

 

三、AJAX对象重要的属性以及方法。

  1.onreadystatechange:绑定事件处理函数,当状态发生改变时的事件控制。

    例如:xhr.onreadystatechange=f1();

  2.readyState:分为0 1 2 3 4 五个状态,其中状态4表示AJAX对象与服务端通信结束,完全接收到服务端相应的内容。

  3.responseTest:接收服务端响应的文本。 

  4.responseXML:接收服务端响应的XML文件。

  5.status(状态码):200表示成功。

 

四、AJAX编程步骤

  1.获取AJAX对象

  2.发送请求

    方式一:get请求

      2.1、创建AJAX对象与服务端通信

        xhr.open(‘get‘,‘checkName.do?name=zhangsan&&password=123‘,true);

        备注:true表示异步,false表示同步

      2.2、AJAX对象绑定事件处理函数

        xhr.onreadystatechange=function();

      2.3、AJAX对象向服务端发送一个数据包

        xhr.send(null);

    方式二:post请求

      2.1、  创建AJAX对象与服务端通信

        xhr.open(‘post‘,‘checkName.do‘,true);

      2.2、发送消息头

        xhr.setRrequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);

      2.3、AJAX对象绑定事件处理函数

        xhr.onreadystatechange=function();

      2.4、AJAX对象向服务端发送一个数据包

        xhr.send(name=zhangsan&&password=123);

  3.编写服务端处理AJAX请求代码(写一个XXXServlet)

  4.function f1(){

    if(xhr.readyState==4){

      var text = xhr.responseText;(如果是XML文件   var xml= xhr.responseXML);    

    }

}

AJAX

标签:rip   页面   属性   一模一样   form   else   利用   sync   内容   

原文地址:https://www.cnblogs.com/zhaokuanjob/p/8480742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!