ajax 入门 1

理论上的东西不说了,诸如什么异步请求之类,好处很多,很大程度上提高B/S系统的上用户体验

首先每一个基于JavaScript的ajax应用(VBScript还有PHP都可以一样使用ajax)总是由一个创建XHR(xmlHttpRequest)对象的函数开始的,XHR(异步请求对象)是ajax的灵魂

  var xmlrequest;
  function createXMLHttpRequest(){
   if(window.XMLHttpRequest){
    //mozilla 浏览器
    xmlrequest = new XMLHttpRequest();
   }else if(window.ActiveXObject){
    //IE浏览器
    try{
     xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
     try{
     xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
     
     }
    }
   }
  }

这里不需要什么解释,每一个应用都是这样开始,几乎是模式化的东西,判断浏览器种类,然后开始创建XHR对象

然后编写一个触发应用的函数,说简单点就是页面上一有一个按钮,一按这个按钮,就开始调用XHR对象来在后台发送一个异步请求,也就是 "触发第一个激活" 的函数

    function getXML(){
   //初始化XHR对象;
   createXMLHttpRequest();
   //设置请求响应的URL
   var uri="buildXMLAction";
   //打开与服务器响应地址的链接
   xmlrequest.open("POST",uri,true);
   //设置请求头
   xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //设置处理响应的回调函数
   xmlrequest.onreadystatechange = processResponse;
   //发送请求
   xmlrequest.send(null);
  }

这里唯一需要注意的是 "回调函数" , 几乎所有的书上都把 "回调函数" 写成processResponse, 一开始笔者就被绕进去了,以为这个函数的名称和功能是不变的,也就是必须写成processResponse,这一度成为我"开窍"的最大障碍.

既然是"激活应用的函数",第一步就是激活刚才我们第一个编写的"创建XHR对象"的函数

   createXMLHttpRequest();
注意这个函数没有返回值,因为我在脚本最开始定义了一个全局变量xmlHttpRequest,注意它是一个变量,名字随便起


然后进行了一些准备工作

 //设置请求响应的URL
   var uri="buildXMLAction";
   //打开与服务器响应地址的链接
   xmlrequest.open("POST",uri,true);
   //设置请求头
   xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");


关于open函数和send函数可以去查baidu,很简单的

然后调用回调函数

 xmlrequest.onreadystatechange = processResponse;


这里onreadystatechange和所有大家见过的onClick onMouseOver onMouseOut 一样,不过是一个事件

onreadystatechange是一个"只能用在XHR对象上"的 "当XHR对象的状态(readyState)改变"时调用函数的一个事件

processResponse 被叫做回调函数,不过它只是一个普通函数,你可以把它写成

 xmlrequest.onreadystatechange = pr; 

这个函数的名字自己定义,内容也自己编写

    function processResponse(){
   //判断相应是否完成
   if(xmlrequest.readyState == 4){
    //判断响应是否成功
    if(xmlrequest.status == 200){
     //信息已经成功返回,开始处理信息
     var text = xmlrequest.responseText;
     //在页面输出所有请求头
     document.getElementById("output").innerText = text;
    }else{
     //页面不正常
     window.alert("您所请求的页面异常");
    }
   }
  }

这里responseText是XHR对象的一个属性,用于接收被请求的servlet或别的什么东西返回的响应

它还有一个类似的属性 responseXML用于接收一个XML对象

页面上用

  
  

    

  

这样每次点击按钮,就发送了一个局部请求

服务器用servlet

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  response.setContentType("text/html");
  PrintWriter out = response.getWriter();
  out
    .println("");

  
  Random rand = new Random(System.currentTimeMillis());
  out.write("这里是返回信息");
  out.flush();
  out.close();
 }

注意这里用的是doGet方法,但是请求里用的是doPost,需要把open函数的参数改为get

或者将doPost 方法导向 doGet

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  doGet(request,response);
 }