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对象介绍

(1) 创建对象方式

var xmlHttp = new XMLHttpRequest();

(2) 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: 未找到页面

(3) 初始化请求参数

方法:

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

参数说明:

· method:请求的类型;GET 或 POST

· url:服务器的servlet地址

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

例如:

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

(4) 发送请求

xmlHttp.send()

(5) 接收服务器响应的数据

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

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

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

全部教程