1.Ajax简介
2.Ajax好处
3.Ajax技术
1.Ajax简介
Asynchronous JavaScript and XML(后来不用xml,用JSON)
异步Javascript和XML
Ajax是属于客户端和服务端交互的一项技术
原有交互模式:
浏览器发送请求–>Tomcat服务器–>Tomcat将响应信息给浏览器–>JSP–>浏览器显示响应结果
Ajax交互模式:
浏览器发送请求–>XMLHttpRequest发送–>Tomcat服务器–>Tomcat返回结果–>XMLHttpRequest接收结果–>将结果显示在浏览器页面
2.Ajax好处
原有的交互模式:
整个页面刷新+请求和响应同步处理(浏览器发送请求之后,只有等到响应回来之后,才可以发送请求)
Ajax交互模式:
可以局部刷新+异步处理
提高了程序的交互效率(传递数据量少)
提升用户体验(避免了整个页面频繁刷新)
3.Ajax技术
Ajax技术是一系列技术的综合运用
基于JS发送请求和响应处理
以XMLHttpRequest对象为核心
涉及HTML,CSS页面渲染技术
方法:
open(“get|post”,”“)
send(数据);//null|key=value
onreadystatechange :事件:readState属性改变时触发注册事件
属性:
readyState:请求的状态0,1,2,3,4
status:HTTP响应CODE(200:成功;404:找不到文件;500:程序异常)
responseText:获取服务器返回文本信息
responseXML:获取服务器返回的XML信息
步骤:
1.创建XMLHttpRequest
2.发送HTTP请求
3.注册一个回调函数,请求处理时自动调用
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
//创建XMLHttpRequest
function getXhr(){
var xhr;
if(window.XMLHttpRequest){//如果支持该类型
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;//需要返回xhr
}
//发送HTTP请求
function sendRequest(){
var xhr = getXhr();//获取XMLHttpRequest
xhr.open("get","demo1.do",true);//创建一个HTTP请求
//注册一个回调函数,请求处理时自动调用
xhr.onreadystatechange = function(){
if(xhr.readyState==4){//4表示请求处理完毕
//获取服务器返回的信息
var msg = xhr.responseText;
//将消息放到id=msg的span显示
document.getElementById("msg").innerHTML=msg;
}
};
xhr.send(null);//发送HTTP请求
};
</script>
<script type="text/javascript">
//检查用户名属否可用
function checkname(){
//获取请求参数
var name = document.getElementById("username").value;
//发送ajax请求
var xhr = getXhr();//获取XMLHttpRequest
xhr.open("post","/ajax01/check.do");//创建请求
xhr.setRequestHeader(
"content-type",
"application/x-www-form-urlencoded");//给HTTP协议设置请求头参数
//注册回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var msg = xhr.responseText;
document.getElementById("username_msg").innerHTML = msg;
}
};
xhr.send("name="+name);//发送请求
}
</script>
</head>
<body>
<!-- 验证是否创建成功 -->
<a href="#" onclick="sendRequest()">查看上证指数</a>
<span id="msg"></span>
<hr>
<table>
<tr>
<td>新闻标题</td>
<td>时间</td>
</tr>
<tr>
<td>王琦与范冰冰的故事</td>
<td>2016.11.11</td>
</tr>
<tr>
<td>王琦与baby的故事</td>
<td>2015.11.11</td>
</tr>
<tr>
<td>范冰冰与baby争王琦</td>
<td>2014.11.11</td>
</tr>
</table>
<hr/>
<input type="text" id="username" onblur="checkname()"/>
<span id="username_msg"></span>
</body>
</html>