AJAX及其工作原理

前端之家收集整理的这篇文章主要介绍了AJAX及其工作原理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX的全称是Asynchronous JavaScript and XML(异步的JavaScript和XML)

AJAX不是一种编程语言,而是一种技术。AJAX能够在不重新加载整个页面的情况下,与服务器交换数据并更新网页部分信息。

在那些需要频繁刷新的web应用中,使用AJAX技术,能够有效提升用户体验。我们使用的很多应用都采用了AJAX技术,包括:谷歌地图、新浪微博、腾讯微博、开心网、人人网等。


工作原理

AJAX的基础是XMLHttpRequest。现代的所有浏览器几乎都支持XMLHttpRequest对象。XMLHttpRequest用于在后台与服务器交换数据,这是在不重新加载整个网页,只更新其中部分的关键。


1、创建XMLHttpRequest对象

所有的现代浏览器(IE7+、Firefox、Chrome、Safari以及Opera)均内建XMLHttpRequest对象。创建XMLHttpRequest的语法如下:

var xmlhttp = new XMLHttpRequest();


2、向服务器发送请求

使用XMLHttpRequest对象的open()和send()方法来实现将请求发送到服务器,

xmlhttp.open("GET",test1.txt,true);

xmlhttp.send();


GET、POST的选择

与POST相比,GET更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,一般使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件数据库
  • 向服务器发送大量数据(POST没有数据量限制)
  • 发送包含未知字符的用户输入时,POST比GET更稳定也更可靠
这里open()中的第三个参数必须为true,这样才能体现出AJAX的特点。

3、服务器响应

使用XMLHttpRequest对象的responseText或responseXML属性获取服务器的响应。

补充——onreadystatechange事件

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

@H_403_70@ 在 onreadystatechange 事件中,规定当服务器响应已做好被处理的准备时所执行的任务。当readyState等于4且状态为200时,表示响应已就绪:
@H_403_70@ xmlhttp.onreadystatechange = function()
@H_403_70@ {
@H_403_70@ if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
@H_403_70@ {
@H_403_70@ document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
@H_403_70@ } @H_403_70@ }

猜你在找的Ajax相关文章