您的位置：首页 > 其它

AJAX学习小结

2017-05-06 14:02 162 查看

这个星期刚开始学习AJAX，就谈一下这个星期学到的东西。

AJAX全称"Asynchronous JavaScript and XML"，即异步Javascript和XML，但是AJAX并不是一门新语言，而是一种新方法或者说是新标准，它的功能是通过与服务器进行少量数据交换进而实现在不更新整个网页的前提下实现部分网页的更新。

AJAX的工作原理：

          AJAX工作时相当于在用户与服务器之间加上了一层中间层，用户提交或者上传的数据先经过中间层，即AJAX引擎，使用户操作和服务器响应异步化，例如数据验证和数据处理可以在AJAX引擎上完成，不会提交给服务器，只有必须要从服务器上获取的AJAX引擎才会代为向服务器发出请求。

具体步骤：

          1.创建XMLHttpRequest对象，也就是创建一个异步调用对象

               不同的浏览器是用的异步调用对象也有所不同，因此在不同浏览器中创建XMLHttpRequest对象的方式都有所不同，由于无

法确认用户使用的浏览器是什么，所以在创建对象时一般将两种方法都加上，代码如下：

<html>
<head>
<title>创建XMLHttpRequest对象</title>
<script language = "javascript" type = "text/javascript">
var xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象
function createXMLHttpRequest()    //创建XMLHttpRequest对象的方法
{
if(window.ActiveXObject)   //判断是否是IE浏览器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  //创建IE浏览器中的XMLHttpRequest对象
}
else if(window.XMLHttpRequest)    //判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
{
xmlHttpRequest = new XMLHttpRequest();  //创建其他浏览器上的XMLHttpRequest对象
}
}
</script>
createXMLHttpRequst();   //调用创建对象的方法
</head>
<body>
</body>
</html>

2.创建一个新的HTTP请求，并指定该HTTP的请求方法、URL及验证信息

创建了XMLHttpRequest对象后，必须为XMLHttpRequest对象创建HTTP请求，用于说明对象要从何处获取数据，通常可以

是网站中的数据或者是本地文件中的数据。创建HTTP请求可以是用XMLHttpRequest对象的open（）方法，代码如下：

XMLHttpRequest.open(method,URL,flag,name,password)

               其中method指的是HTTP的请求方法，URL用于指定HTTP的请求地址，其中地址可以为绝对也可以为相对的，flag为可选参数，true为异步方式，false为同步方式，默认为true，name为可选参数，如果需要验证，则必须使用该参数，password为可选参数，需要输入密码访问时则必须输入。

          3.设置响应HTTP请求状态变化的函数

               创建完HTTP请求之后，应该就可以将HTTP请求发送给Web服务器了。然而，发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态：未初始化状态、初始化状态、发送数据状态、接收数据状态、完成状态，只有在XMLHttpRequest对象完成了以上5个步骤后才能获取服务端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。

               XMLHttpRequest对象可以响应readystatechange事件，该事件在XMLHttpRequest对象发生状态改变时激发。因此，可以通过该事件调用一个函数，并在该函数中判断XMLHttpRequest对象的readyState值。如果readyState的值为4则使用responseText属性或者responseXml属性来获取数据。代码如下：

//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData(){
//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
if(xmlHttpRequest.readyState == 4)
{
//设置获取数据的语句
}
}
          4.发送HTTP请求

               判断异步调用成功后，就可以将HTTP请求发送到服务器上去了，发送HTTP请求可以使用XMLHttpRequest对象的send（）方法，语法代码如下：

XMLHttpRequest.send(data);

               其中date是可选参数，如果请求的数据不需要参数可以用null代替。data参数的格式与在URL中传递参数的格式类似。只有在使用send（）方法后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。

          5.获取异步调用返回的数据

          6.用Javascript和DOM实现局部刷新

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航