AJAX
jQuery

AJAX介绍

 

 

什么是AJAX

 

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

 

AJAX是一种在无需重新加载整个网页的情况下,能够更新部分页面内容的新方法

 

AJAX 不是新的编程语言,而是使用现有技术混合使用的一种新方法。ajax中使用的技术有JavaScript, html , dom , xml ,css 等。主要是JavaScript , XML.

 

JavaScript: 使用脚本对象XMLHttpRequest发送请求, 接收响应数据

 

XML: 发送和接收的数据格式,现在使用json

 

AJAX不单需要前端的技术,同时需要后端(服务器)的配合。服务器需要提供数据,数据是AJAX请求的响应结果。

 

 

AJAX异步实现步骤

 

XMLHttpRequest对象介绍

 

● 创建对象方式

 

var xmlHttp = new XMLHttpRequest();

 

● onreadstatechange事件

 

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。此事件可以指定一个处理函数function。

 

通过判断XMLHttpReqeust对象的状态,获取服务端返回的数据。

 

语法:

 

xmlHttp.onreadystatechange= function() {

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

  处理服务器返回数据

  }

  }

 

下面是 XMLHttpRequest 对象的三个重要的属性:

 

属性说明:

 

onreadystatechange 属性:一个js函数名 或 直接定义函数,每当 readyState 属性改变时,就会调用该函数

 

readyState属性:

 

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

 

0: 请求未初始化,创建异步请求对象 var xmlHttp = new XMLHttpRequest()

 

1: 初始化异步请求对象, xmlHttp.open(请求方式,请求地址,true)

 

2: 异步对象发送请求, xmlHttp.send()

 

3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest内部处理。

 

4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。

 

status 属性:

 

200: "OK"

 

404: 未找到页面

 

 

● 初始化请求参数

 

方法:open(method,url,async) : 初始化异步请求对象

 

参数说明:method:请求的类型;GET 或 POST

 

url:服务器的servlet地址

 

async:true(异步)或 false(同步)

 

例如:xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)

 

● 发送请求

 

xmlHttp.send()

 

● 接收服务器响应的数据

 

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

 

responseText:获得字符串形式的响应数据

 

responseXML:获得 XML 形式的响应数据

 

全部教程