AJAX初级应用——XMLHttpRequest对象

一、Ajax定义：

        Ajax（Asynchronous JavaScript and XML）其实是多种技术的综合，包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中，使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换和处理，使用XMLHttpRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据。

 

二、Ajax的好处：

        1、  局部刷新          2、 按需取数据

 

三、Ajax应用的五步骤：

       1、创建XMLHttpRequest对象

       2、设置回调函数

       3、使用open()方法与服务器创建连接

       4、使用send()方法想服务器发送参数

       5、在回调函数中针对不同的响应状态进行处理

 

 

四、Ajax开发——XMLHttpRequest对象

        在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用javascript创建一个XMLHttpRequest。由于XMLHttpRequest不是一个W3C标准，所有可以采用多种方法使用javascript来创建XMLHttpRequest的实例。

        1、 XMLHttpRequest对象的创建

                Internet Explorer把XMLHttpRequest实现为一个ActiveXduix，其他浏览器（如Firefox）把它实现为一个本地javascript对象。

                 

                注：从window. XMLHttpRequest创建的XMLHttpRequest也可能是IE7或IE8浏览器

        2、  XMLHttpRequest对象方法和属性

                方法：

                abort()                                                       停止当前请求

                getAllResponseHeaders()                            作为字符串返回完整的headers

                getResponseHeader("headerLabel")           作为字符串返回单个的header标签

                open("method","URL",Boolean)                  建立服务器调用，第三个参数值为true表示异步传输，false表示同步传输

                send(content)                                            发送请求

                setRequestHeader("label", "value")              设置header并和请求一起发送

               属性：

               onreadystatechange      状态改变的事件触发器

               readyState                    对象状态(integer): 0 =未初始化，1 = 读取中，2 =已读取，3 = 交互中，4 =完成

               responseText                服务器进程返回数据的文本版本

               responseXML              服务器进程返回数据的兼容DOM的XML文档对象

               status                           服务器返回的状态码, 如：404 = "文件未找到"、200 ="成功"

               statusText                    服务器返回的状态文本信息

 

五、例子：校验数据

        1、  例子所用的工具是myeclipse、tomcat

        2、  新建一web项目，名字为Ajax

               

        3、  在WebRoot目录下的index.jsp中添加javascript代码

               

                如果用“post“方法提交，需要自己设置头信息，代码如下

              

   

        4、  index.jsp中body体添加代码

               

       5、  在WebRoot目录下新建一service.jsa并在body体中添加代码

              

       这里假设存在一用户名“chensr”

六、测试：

       启动tomcat，打开浏览器输入http://localhost:8080/Ajax/index.jsp，输入用户名chensr命点击检验唯一性，此时会出现

      

       删掉用户名chensr，在输入heeh，此时出现

      

       测试成功

 

Ps：在此次测试中，发现的如下问题

1、  如果不在tomcat下发布，并把.jsp改成.html（当然，service.html的body只是单纯的几个字），此时在IE浏览器上没法运行，Firefox则可以运行

2、  XMLHttpRequest的status属性会无故的变化，有时是0，有时是200