假期前课程回顾与深化：基于AJAX1技术要点.pdfVIP

假期前课程回顾

JavaEE

Java开发

JAVAOracqlJDBC

WEB:静态资源Html,Javascript,Css

动态资源：Jsp,Servlet

引入ajax

什么是ajax？asychronizedjavascriptandxml，是几种技术的联合

特点是：在不更新页面的前提下，是页面的部分数据发生改变。同时不阻塞下面js代码，

异步进行。

Ajax的是JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入，

它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服

务器提出请求并处理响应，而不阻塞用户。

Aja互流程

Aja互用到对象时xmlhttprequest

开始一个aja互基本步骤：(课堂例子)

!DOCTYPEhtml

html

head

metacharset=UTF-8

titleInserttitlehere/title

scripttype=text/javascript

functionajaxValid()

{

//获取username文本框的值

var

username=document.getElementById(username).value;

//都查询用户名是否已经存在，把结果返回给前台页面。

//ajax对象是XMLHttpRequest

//1.首先创建一个xhr对象不同的浏览器对应的对象不一

样。IE5,6版本ActiveXObject

varxhr;

if(window.ActiveXObject){

//可以判断这是IE5,6

xhr=newActiveXObject(.XMLHTTP);

}

else{

xhr=newXMLHttpRequest();

}

//2.打开一个和的

xhr.open(get,

/MyAjax/ajaxServlet?username=+username);

//3.给xhr一个

xhr.onreadystatechange=function(){

if(xhr.readyState==2){

console.log(已加载);

}

if(xhr.readyState==3){

console.log(交互中);

}

if(xhr.readyState==4){

console.log(已完成);

//alert(xhr.responseText);

if(xhr.status==200)

document.getElementById(info).innerHTML=font

color=green+xhr.responseText+/font;

}

};

//4.发送请求

xhr.send(null);

}

/script

/head

body

form

用户名：inputtype=textid=username

name=usernameonblur=ajaxValid()/span

id=info/spanbr

：inputtype=passworme=