Ajax用法:
客户端与服务器段连接步骤:
1.创建xmlhttprequest对象
2.客户端与服务器端建立连接
3.客户端向服务器端发送请求
4.服务器端向客户端进行相应
在js中写:
Get方式
1. //封装javascript代码
//当页面加载完毕之后,再执行以下代码
window.onload = function(){
document.getElementById("ok").onclick = function(){
//1创建XMLHttpRequest对象
var xhr = ajaxFunction();
/*
* 2 服务器端向客户端进行响应(注册监听)
*
* * 使用XMLHttpRequest对象的onreadystatechange属性:监听服务器端的通信状态
* * 使用XMLHttpRequest对象的readyState属性:获取服务器端的通信状态
* 0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
*
* * 使用XMLHttpRequest对象的status属性:获取服务器端响应首部信息中的状态码
* 常用状态码及其含义:
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
*
* 使用使用XMLHttpRequest对象的responseText属性:接收服务器端的响应结果
*/
xhr.onreadystatechange = function(){
alert(xhr.readyState);
//alert(xhr.status);
if(xhr.readyState==4){
if(xhr.status==200||xhr.status==304){
//真正接收服务器端的响应结果
var data = xhr.responseText;
alert(data);
}
}
}
/*
* 3 客户端与服务器端建立连接
*
* 使用XMLHttpRequest对象的open(method, url, asynch)方法
* * method:请求类型,GET或POST
* * url:请求路径,可以是绝对路径或相对路径.
* * asynch:表示是否异步,默认值为true(表示异步)
*
* 绝对路径与相对路径:
* * 绝对路径:http://localhost:8080/day03_ajax/testServlet
* * 相对路径:../testServlet
*
*/
xhr.open("get","../testServlet?timeStamp="+new Date().getTime()+"&c=9",true);
/*
* 4 客户端向服务器端发送请求
*
* 使用XMLHttpRequest对象的send()方法
* * 如果请求类型是GET方式的话,利用send()方法发送请求数据,服务器端接收不到
* * 该步骤不能被省略,写成:xhr.send(null);
*/
xhr.send("a=7&b=8");
}
//固定写法:背下来
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;
}
}
Post方式:
window.onload = function(){
document.getElementById("ok").onclick = function(){
var xhr = ajaxFunction();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
alert(data);
}
}
}
xhr.open("post","../testServlet?timeStamp="+new Date().getTime(),true);
//手动设置请求首部信息:"Content-Type"为"application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("a=7&b=8");
}
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;
}
}