AJAX - 基本知识

ajax=异步的javascript和xml

     通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

一、ajax

- 创建 xmlhttprequest 对象

1.什么是xmlhttprequest对象

     所有现代浏览器（ie7、chrome、firefox、safari、opera）均支持xmlhttprequest对象，xmlhttprequest对象用来在后台与服务器交换数据，实现页面局部刷新。

2.如何创建xmlhttprequest对象

     一般浏览器都支持xmlhttprequest对象，但部分ie浏览器支持的是activexobject。

var xmlhttp;

3.xmlhttprequest对象如何与服务器交换数据

3.1 向服务器发送请求

     我们使用xmlhttprequest的open和send方法：

方法

描述

open(method,url,async)

规定请求的类型、url 以及是否异步处理请求。

method：请求的类型；get 或 post

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 post 请求

3.1.1 使用get请求

     一个简单的get请求：

     为了避免每次获得的是缓存中的内容，为了避免，可以在url中加一个唯一的时间id：

     通过get向服务器发送数据demo：

3.1.3 使用post请求：

     一个简单的post请求：

     如果像html表单那样post数据，在setrequestheader来添加http头，使用send方法中规定要发送的数据：

     向请求添加 http 头：setrequestheader(header,value)     

          header: 规定头的名称

          value: 规定头的值

3.1.3关于异步true或false:

     对于web开发来说，发送异步请求是一个巨大的进步，因为很多在服务器执行的任务都相当费时，在ajax出现前，这可能会引起应用程序挂起或停止。

     通过ajax,javascript无需等待服务器响应，而是：

          1.在等待服务器响应期间执行其它脚本

          2.当响应就绪后对响应进行处理

当async=true时，应设置onreadystatechange事件中处于就绪状态时的执行函数：

当async=false时，处于同步状态，此时javascript会等到服务器就绪时才执行，无需写onreadystatechange监控函数：

3.2 服务器的响应

如果要获得来自服务器的响应，使用xmlhttprequest中的responsetext或responsexml。

responsetext

获得字符串形式的响应数据。

responsexml

获得 xml 形式的响应数据。

3.2.1 使用responsetext

     responsetext 属性返回字符串形式的响应，因此您可以这样使用：

3.2.2 使用responsexml

     如果来自服务器的响应是 xml，而且需要作为 xml 对象进行解析，请使用 responsexml 属性：

3.3 ajax 的 onreadystatechange事件

     当请求发送到服务器的整个过程中，我们需要执行一些基于响应的任务，即每当readystate改变时都会触发onreadystatechange事件，readystate属性存有xmlhttprequest的状态信息。

下面是xmlhttprequest对象的三个重要属性：

属性

onreadystatechange

存储函数（或函数名），每当 readystate 属性改变时，就会调用该函数。

readystate

存有 xmlhttprequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200: "ok"

404: 未找到页面

当readystate=4且status=200时，表示响应已就绪：

3.4 使用callback回调函数

     callback函数是一种以参数的形式传递给另一个函数的函数，我们在处理ajax任务时，一般都会写一个处理ajax请求的标准函数，这个标准函数包括请求的url和发生onreadystatechange时间所执行的任务：

< html>

     < head>

     < script type ="text/javascript" >

          var xmlhttp;

          function loadxmldoc(url,cfunc) {

               if (window.xmlhttprequest) { 

                    // code for ie7+, firefox, chrome, opera, safari

                 xmlhttp= new xmlhttprequest();

              } else { 

                    // code for ie6, ie5

                 xmlhttp= new activexobject( "microsoft.xmlhttp" );

              }

               xmlhttp.onreadystatechange=cfunc;

               xmlhttp.open( "get",url, true );

               xmlhttp.send();

          }

          function myfunction(){

               loadxmldoc( "/ajax/test1.txt", function (){

                 if (xmlhttp.readystate==4

&& xmlhttp.status==200){

                   document.getelementbyid( "mydiv" ).innerhtml=xmlhttp.responsetext;

                }

              });

          }

     </ script>

     </ head>

< body>

  < div id= "mydiv" >

             < h2> let

ajax change this text </h2 >

  </ div>

  < button type ="button" onclick= "myfunction()"> 通过

ajax 改变内容 </ button>

     </ body>

</ html>