是什么?
“Asynchronous JavaScript And XML”(异步JavaScript和XML)
并不是新的技术,而是把原有的技术,整合到一起而已。- 使用CSS和XHTML来表示
- 使用DOM模型来交互和动态显示
- 使用XMLHttpRequest来和服务器进行异步通信
- 使用JavaScript来绑定和调用
有什么用?
网页内容局部刷新 而不影响其他内容加载,eg注册时用户名重复与否的检测(保持其他部分不动,之刷新某些地方)。
下面试get和post两种请求方式的代码示例
###/执行get请求/执行get请求
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求。
// http://localhost:8080/day16/demo01.jsp
//http://localhost:8080/day16/DemoServlet01
/*
参数一: 请求类型 GET or POST
参数二: 请求的路径
参数三: 是否异步, true or false
*/
// request.open("GET" ,"/day16/DemoServlet01" ,true );
request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
request.send();
}
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求
request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
//3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变,那么就执行 = 号右边的方法
request.onreadystatechange = function(){
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
</script>
引用一段W3school原文 >
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: “OK” 404: 未找到页面 |
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。
/执行post请求/执行post请求
<script type="text/javascript">
//1. 创建对象
function ajaxFunction(){
var xmlHttp;//其实和上面get里这两种方式都可以 就是想写一些
if(window.XMLHttpRequest){//返回true就是说明是新版IE或者其他浏览器
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
return xmlHttp;
}
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/day16/DemoServlet01", true );
//想获取服务器传送过来的数据, 加一个状态的监听。
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
var data=request.responseText;
if(data==1){
document.gtElementById("spam01").innerHTML="<font color='red'>用户已存在!</font>"
}else{
document.gtElementById("spam01").innerHTML="<font color='green'>用户名可用</font>"
}
}
//如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 , 在send方法里面写表单数据。
request.send("name=aobama&age=19");
}
</script>
哈哈哈哈哈我试着玩的没有用可以渲染序列图:
或者流程图: