前端开发 \ AJAX \ Ajax基础

Ajax基础

总点击56
简介:        AJAX=AsynchronousJavaScriptandXML(异步的JavaScript和XML)。         AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

        AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

        AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

创建XMLHttpRequest对象

        XMLHttpRequest 是 AJAX 的基础。

        所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均支持内建 XMLHttpRequest 对象。老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject 对象。

        为了应对所有的现代浏览器,创建对象,要检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 对象:

var AjaxObject;

if(window.XMLHttpRequest){

AjaxObject=new XMLHttpRequest();

}

else{

AjaxObject=new ActiveXobject("Microsoft.XMLHTTP");

}

向服务器发送请求

        XMLHttpRequest对象用于和服务器交换数据。

如需将请求发送到服务器,使用 XMLHttpRequest 对象的 open() 和 send() 方法:

AjaxObject.open("GET","ajax_info.txt",true);


AjaxObject.send();

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。

method:请求的类型;GET 或 POSTurl:文件在服务器上的位置async:true(异步)或 false(同步)send(string)将请求发送到服务器。

string:仅用于 POST 请求与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)向服务器发送大量数据(POST 没有数据量限制)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠open() 方法的 url 参数是服务器上文件的地址,该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。


XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

在等待服务器响应时执行其他脚本当响应就绪后对响应进行处理

服务器响应

如需获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。当使用 async=true 时,规定在响应处于 onreadystatechange 事件中的就绪状态时执行函数:

AjaxObject.onreadystatechange=function(){

    if(AjaxObject.readyState==4 && AjaxObject.status==200){

    document.getElementById("myDiv").innerHTML=AjaxObject.responseText;

    }

}

AjaxObject.open("GET",true);

AjaxObject.send();

onreadystatechange 事件

当请求被发送到服务器时,需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

 XMLHttpRequest 对象的三个重要的属性:

onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪status200: "OK"


404: 未找到页面在 onreadystatechange 事件中,规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪.

注意: onreadystatechange 事件被触发 4 次(0 - 4),分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Ajax简单例子</title>

<script>

function loadXMLDoc(){

var AjaxObject;

if(window.XMLHttpRequest){

AjaxObject=new XMLHttpRequest();

}

else{

AjaxObject=new ActiveXobject("Microsoft.XMLHTTP");

}

AjaxObject.onreadystatechange=function(){

if(AjaxObject.readyState==4 && AjaxObject.status==200){

document.getElementById("myDiv").innerHTML=AjaxObject.responseText;

}

}

AjaxObject.open("GET",true);

AjaxObject.send();

}

</script>

</head>

<body>

<div id="myDiv"><h1>学习Ajax</h1></div>

<button onclick="loadXMLDoc()">改变内容</button>

</body>

</html>

0人推荐

推荐文章

热门标签

意见反馈 常见问题 官方微信 返回顶部