Ajax的属性方法事件以及简单案例

来源：互联网发布：java服务器高并发编辑：程序博客网时间：2024/05/18 03:40

AJAX入门及简介

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

AJAX - 浏览器支持

AJAX 的要点是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

function GetXmlHttpObject(){  var xmlHttp=null;  try    {    // Firefox, Opera 8.0+, Safari    xmlHttp=new XMLHttpRequest();    }  catch (e)    {    // Internet Explorer    try      {      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e)      {      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }    }  return xmlHttp;}

属性

readonly short readyState（只读的short类型）
State NameDescription 0 Uninitialized XMLHttpRequest刚刚创建，或者刚调用了abort()方法。 1 Open 调用了XMLHttpRequest的open方法，但还没有调用send方法。请求还没有发出 2 Sent send方法已经调用，数据已经提交到服务器，但没有任何响应 3 Receiving XMLHttpRequest收到了所有的响应消息头，但正文还没有完全收到 4 Loaded XMLHttpRequest收到了所有的响应消息头，但正文还没有完全收到
responseText：类型string，只读。
作用：存放着服务器返回的响应正文内容（文本内容）.
responseXML:类型Document，只读.
作用：存放着服务器返回的响应正文内容（XML内容）
status：类型short，只读
作用：服务器响应状态码
statusText：类型string，只读
作用：服务器响应码描述

方法

void abort():取消。回到最出始的状态。
String getAllResponseHeaders():获取所有的响应消息头。用逗号分隔的。
String getResponseHeader(String headerName):获取指定的响应消息头的值。
void open(String method,String url,boolean isAnsy);建立与服务器的链接。
method:请求方式 url：请求的地址 isAnsy：是否是异步的。默认是异步的
void send(String data):向服务器发送请求正文
void setRequestHeader(String headerName,String value):设置请求消息头。

事件

onreadystatechange,当XMLHttpRequest对象的readyState发生变化时，都会调用onreadystatechange指定的方法。

js实现ajax的简单案例

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>js实现ajax</title>        <script type="text/javascript">            //声明核心对象            var xmlHttp = GetXmlHttpObject();            window.onload = function() {                var dom = document.getElementById("btn");                dom.onclick = function() {                    //1.创建核心对象                          xmlHttp = GetXmlHttpObject();                    //绑定函数                    xmlHttp.onreadystatechange = fn;                    //打开链接                    xmlHttp.open("get", "ajax.html", true);                    //发送                    xmlHttp.send();                }            }            function fn() {                if (xmlHttp.readyState == 4) { // 4 = "loaded"                    if (xmlHttp.status == 200) { // 200 = "OK"                        document.getElementById("dv").innerHTML = xmlHttp.responseText;                    } else {                        alert("Problem retrieving data:" + xmlHttp.statusText);                    }                }            }            function GetXmlHttpObject() {                var xmlHttp = null;                try {                    // Firefox, Opera 8.0+, Safari                    xmlHttp = new XMLHttpRequest();                } catch (e) {                    // Internet Explorer                    try {                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");                    } catch (e) {                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                    }                }                return xmlHttp;            }        </script>    </head>    <body>        <button id="btn">阿贾克斯ajax</button>        <div id="dv"></div>        <pre>            1.创建Ajax流程                *创建核心对象xmlHTTPRequest                *绑定函数                *打开连接                *发送数据                *处理回调函数        </pre>    </body>    </html>

1 0