你的位置:首页 > Java教程

[Java教程]ajax的来龙去脉


  这是我在博客园写的第一遍博客,之前都是只看不写,在园子里学到了不少的东西,现在也想着把自己的一些感悟写出来给大家分享一下。

  ajax技术可以说是Web2.0应用程序的技术基础,尽管软件经销商和开源社区提供很多ajax的框架,但是我们仍然有必要理解ajax实现的来龙去脉。

  首先要说的是HTTP请求,因为ajax是基于HTTP请求的,所以说ajax就必须要从HTTP请求说起。我们知道我们上网的过程就是浏览器和服务器进行文件传输的过程,而他们之间之所以能够进行传输文件肯定是遵守了一定的规范,而HTTP规范就是浏览器和服务器进行文件传输的规范之一。

  HTTP(Hyper Text Transfer Protocol)超文本传输协议,它对浏览器向服务器的请求和服务器对浏览器的响应都进行了规范,所以HTTP主要包括请求和响应两部分。请求主要包括请求行,请求头和请求主体三部分。

这里需要注意的是,用get请求方式请求的时候请求的内容是拼接在URL后面的,而用post请求的时候,请求的内容是放在请求主体里面。还有就是用post请求方式进行请求的时候请求头里要设置Content-Type这个属性而用get请求的时候则不需要。

相对应的服务器向浏览器的响应包括了相应行,响应头和响应主体三部分

  说完了HTTP请求,我们就可以来说一下Ajax技术了,ajax不是一种新的语言而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通讯。而ajax就是Asynchronous JavaScript And

  下面我们就结合实际代码来体会一下,ajax怎么实现与后代的数据相互的

  =====get=====     //设置请求行  xhr.open('get','02.php?name=zhang&age=18');  //设置请求头  //get 不用设置  //post必须设置  //设置请求主体  //如果是get null post要把请求的内容放在里面  xhr.send(null);  =====post====   //设置请求行  xhr.open('post');  //设置请求头  //get 不用设置  //post必须设置  xhr.setRequestHeader('Content-Type','application/x-www-form-    urlencoded');  //设置请求主体  //如果是get null post要把请求的内容放在里面  xhr.send('02.php?name=zhang&age=18');

  这样就利用

 //监听响应状态的变化  xhr.onreadystatechange = function(){    if ( xhr.status == 200 && xhr.readyState == 4 ){      //当响应的状态为4 HTTP的状态为200的时候 处理响应的内容          }  }

  下面是

  当

  表格1.

ReadyState取值

描述

0

描述一种"未初始化"状态;此时,已经创建一个

1

描述一种"发送"状态;此时,代码已经调用了

2

描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。

3

描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。

4

描述一种"已加载"状态;此时,响应已经被完全接收。


  onreadystatechange事件
  无论readyState值何时发生改变,
  responseText属性
  这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
  response
  此response
  其实,这个response
  status属性
  这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
  statusText属性
  这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

  到这里Ajax的“A”和“J"已经说完了 现在还有一个X没有说,我们知道X是

  

<?////一定要有一个root节点//root里面的东西可以自定义<root>  <array>    <item>      <picture>apple</picture>      <oldPrice>100</oldPrice>      <newPrice>10</newPrice>    </item>    <item>      <picture>apple</picture>      <oldPrice>100</oldPrice>      <newPrice>10</newPrice>    </item>    <item>      <picture>apple</picture>      <oldPrice>100</oldPrice>      <newPrice>10</newPrice>    </item>  </array></root>

 

 语法规则

1、必须有一个根元素

2、不可有空格、不可以数字或.开头、大小写敏感

3、不可交叉嵌套

4、属性双引号(浏览器自动修正成双引号了)

5、特殊符号要使用实体

6、注释和HTML一样

  现在我们把ajax的四个单词都介绍完了,我们结合一个综合的案例用ajax把一个

  

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style type="text/css">   table{      border-collapse: collapse;    }    td,th{      border: 1px solid #ccc;      height: 50px;      text-align: center;      padding: 0 20px;    }</style></head><body>  <table>    <thead>      <tr>        <th>图片地址</th>        <th>原始价格</th>        <th>折后价格</th>      </tr>    </thead>    <tbody>    </tbody>  </table></body><script type="text/javascript">  //获取异步对象  var xhr = new //设置请求头  xhr.open('get','03.php');  //设置请求主体  xhr.send(null);  //监听响应状态  xhr.onreadystatechange = function(){    if( xhr.readyState == 4 && xhr.status == 200 ){      //接收      //console.log(xhr.response      var  xhr.response//获取      var items = );      var renderDom = document.querySelector('tbody');      var renderHtml = '';      for ( var i = 0; i < items.length; i++ ){        //遍历数据 获取每个数组里的内容        var item = items[i];        var picDom = item.querySelector('pic');        var oldDom = item.querySelector('oldPrice');        var newDom = item.querySelector('newPrice');        //获取每个标签里的值        var pic = picDom.innerHTML;        var old = oldDom.innerHTML;        var ne = newDom.innerHTML;        //把        renderHtml += '<tr>';        renderHtml += '<td>'+pic+'</td>';        renderHtml += '<td>'+old+'</td>';        renderHtml += '<td>'+ne+'</td>';        renderHtml += '</tr>';      }      //渲染到页面上      renderDom.innerHTML = renderHtml;    }  }</script></html>

  到现在整个Ajax的基本含义上面有了一个整体的解释,但是

  if( window.var xhr = new var xhr = new ActiveXObject("Micsoft.