Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法

前端之家收集整理的这篇文章主要介绍了Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1 什么是ajax

  ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完整 的页面),浏览器利用这些数据对当前页面做部分更新; 整个过程,页面无刷新,不打断用户的操作。

  

  注意1:异步请求,指的是,当ajax对象发请求时,浏览器不会销毁当前页面用户仍然可以对当前页面做其它的操作。

  

  注意2:打电话可以看成是同步请求,发短信可以看成是异步请求

  注意3:AJAX 不是一门的新的语言,而是对现有技术的综合利用;本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

  

2 如何获取ajax对象

  

获取ajax对象源代码

3 ajax对象的几个重要属性

  a.onreadystatechange:绑订一个事件处理函数, 该函数用来处理readystatechange事件。
    注:当ajax对象的readystate属性值发生了改变, 比如,从0变成了1,则会产生readystatechange事件。
  b.readyState:有5个值(0,1,2,3,4),表示ajax对象与服务器通信的进展。其中,4表示ajax对象已经获得了服务器返回的所有的数据。
  c.responseText:获得服务器返回的文本数据。
  d.responseXML:获得服务器返回的xml数据。
  e.status:获得状态码。

4 使用ajax的编程步骤

  step1. 获得ajax对象。
    比如 var xhr = getXhr();
  step2. 发送请求。
    方式一: get请求
      xhr.open('get','checkuname.do?uname=Sally',true); xhr.onreadystatechange = f1; xhr.send(null);

        参数1:请求方式

        参数2:请求地址

        参数3:异步还是同步
          true:异步请求(默认是异步请求,二货才用ajax来实现同步请求【特殊情况除外】)
          false:同步请求(当ajax对象发送请求时,浏览器会锁 定当前页面用户不能够对当前页面做任何操作)。
    方式二: post请求
      xhr.open('post','checkuname.do');

      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

      xhr.onreadystatechange = f1; xhr.send('uname=Sally'); 注:      按照http协议要求,如果发送的是post请求, 在请求数据包里面,应该包含有content-type消息头; 默认情况下,ajax对象不会添加该消息头,所以需要 调用setRequestHeader方法添加。   step3. 编写服务器端的程序。通过只需要返回部分 数据(不再需要返回完整的页面)。   step4. 写事件处理函数。     例如:      function f1(){ if(xhr.readyState == 4 && xhr.status == 200){ //获得服务器返回的数据 var txt = xhr.responseText; //更新页面 ... } }

原文链接:https://www.f2er.com/ajax/161103.html

猜你在找的Ajax相关文章