Java Web——AJAX(阿贾克斯)技术

u复习服务端交互

uAJAX简介

ureadyState状态属性

uAJAX返回值的接收、PrintWriter对象的使用

ustatus属性

uAJAX是一种组合技术(JavaScript,HTML,CSS,XML, DOM,XMLHttpRequest)

全拼:

Asynchronous javascript and XML

u异步传输是AJAX技术的最大特色之一

借助JavaScript内部的XMLHttpRequest对象可以进行异步数据传输,使用户在等待服务器返回数据的同时,可以进行页面的其他操作。

u异步传输是ajax技术最大的特色之一,借助于javascript内部的XMLHttpRequest对象的异步传输技术,Ajax可以完成类似cpu的多线程的任务

当用户等待服务器返回数据的同时,可以进行另外的操作

XMLHttpRequest对象

uAjax最重要的特点之一是可以实现异步数据传输,而Ajax能够实现数据的异步传输,所依赖的是JavaScript中的XMLHttpRequest对象

uXMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST GET 请求的能力,XMLHttpRequest可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容

uXMLHttpRequest对象的创建

  var xmlhttp=new XMLHttpRequest()

 

 

responseXML属性

uresponseText属性为只读属性,用于接收客户端收到的HTTP响应的文本内容

u如果readyState值为12时,responseText的值是一个空字符串,当为3时表示响应信息正在接收,还未完成

ureadyState的值为4时,表示可以响应信息已经接收完成。xmlHttp默认响应数据编码为utf-8

u如果服务器返回的是xml文档,此属性并不处理xml文档中的编码声明,需要使用responseXML来处理

u在执行send()方法后,如果服务器正确返回了xml类型的数据,可以使用XMLHttp Request属性接收返回的信息格式化为XML Document对象

u这时content-type头指定的mime的类型应该为text/xml, 如果content-type不包含这种类型, responseXML在接收时将会得到一个null

readyState状态

状态

名称

描述

0

Uninitialized

初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1

Open

open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。

2

Send

Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。

3

Receiving

所有响应头部都已经接收到。响应体开始接收但未完成。

4

Loaded

HTTP 响应已经完全接收。

status属性状态

100

客户必须继续发出请求

200

成功

400

错误请求

403

请求不允许

404

没有发现文件,查询或URL

500

服务器内部错误

502

服务器暂时不可以用

505

服务器不支持或拒绝支持请求头中指定的http版本

onreadystatechange事件

uXMLHttpRequest对象的onreadystate change事件是readyState属性值发生变化时所要执行的操作

u在使用过程中,通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理,在事件处理函数中根据readyState的状态值进行相应的处理

open()方法用于创建一个新的http请求,并制定此请求的方法,url及验证信息等

xmlHttp.open(method,url,model)

Ømethod:代表HTTP请求方法,如postget在这里可以忽略大小写。

Øurl:请求的目标地址

Ømodel:为布尔型参数,指定请求是否为异步方式,默认为true,如果为true,当state的状态改变时会调用onreadystatechange属性指定的处理函数。如果为false则处理将会等待,直到服务器返回响应为止

send方法用于发送请求到服务器并接收回应,语法格式为:xmlhttp.send(content);

其中参数content为要发送到服务器的内容,如果没有可以省略

Ø该方法的同步或异步取决于open方法中的声明

Ø如果为同步此方法会等待请求完成响应再返回;如果为异步,该方法立即返回

u使用get请求

xmlhttp.open("get", "url?param=paramvalue& param2=param2value" ,true);

xmlhttp.send(null);

u使用post请求

xmlhttp.open("post", "url",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("param=paramvalue&param2=param2value");

猜你喜欢

转载自blog.csdn.net/weixin_41577923/article/details/83280784