Ajax最基本用法

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;

 }

}