现在的位置: 首页 > 综合 > 正文

Ajax2

2017年11月30日 ⁄ 综合 ⁄ 共 2851字 ⁄ 字号 评论关闭

 DHTMl:javascript,css,dom以前被称为DHTML。即动态HTML:可以用来创建交互性很强的页面,但无法与服务器通信,无法异步发送请求。Ajax加入了XMLHttpRequest对象,这个对象提供了与服务器交互的能力,可以异步发送请求,提供了与服务器异步通信的能力,因而Ajax可给用户一种全新的体验。

 

//创建XMLHttpRequest对象

Function createXMLHTTPRequest()

{

//DOM2浏览器(除IE之外的其他浏览器都会遵守DOM2规范)

 If(window.XMLHttpRequest)

{

 XMLHttpRequest = new XMLHttpRequest();

}

Else if(window.ActiveXObject)

 {

   //Internet Explorer

     Try{

         XMLHttpRequest = new ActiveXObject(“Msxmls2.XMLHTTP”);

}catch(e)

{

    Try{

        XMLHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

}catch(e)

{

 

}

}

}

}

XMLHttpRequest发送请求

//发送请求函数

Function sendRequest()

{

 //input 是个全局变量,就是用户输入聊天信息的单行文本框

 Var chatMsg = input.value;

 //完成XMLHttpRequest对象的初始化

 createXMLHTTPRequest();

//定义发送请求的目标URL

Var url = “server.do”;

//通过open方法取得与服务器的连接

//发送POST请求

XMLHttpRequest.open(“POST”,url,true);

//设置请求头,发送POST请求时需要该请求头

XMLHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

//指定XMLHttpRequest状态改变时的处理函数

XMLHttpRequest.onreadystatechange = processResponse;

//清空输入框的内容

Input.value=””;

//发送请求,send的参数包含许多的key-value对,即以“请求参数名=请求参数值”的形式发送请求参数

XMLHttpRequest.send(“message=”+ chatMsg);

}

因为采用POST方式发送请求参数,因此在请求里增加了Content-Type请求头,并将请求头的值设为application/x-www-form-urlencoded,这是为了保证对请求参数采用合适的格式发送

XMLHttpRequest发送请求的步骤:

1.       使用open方法连接服务器URL

2.       调用setRequestHeader方法为请求设置合适的请求头,根据不同的请求,可能需要设置不同的请求头

3.       指定回调函数,所谓回调函数就是用于检测XMLHttpRequest状态的函数,当XMLHttpRequest的状态发生改变时,该回调函数将被触发而自动执行

4.       调用send方法发送请求

解决多余刷新的问题:

对于Ajax系统而言,服务器响应无须是整个页面的内容,可以仅是必需的数据,控制器不能将请求转发到view.jsp页面。此处控制器有两个选择:

1.       直接生成简单的响应数据

2.       转向一个简单的JSP页面,使用JSP页面生成简单的响应

直接使用控制器生成响应数据:

//设置响应内容的类型

Response.setContentType(“text/html;charset=GBK”);

//获取页面输出流

PrintWriter out = response.getWriter();

//直接生成响应

Out.println(“所需的数据信息”)

该servlet与生成HTML页面的servlet存在区别,该servlet没有生成任何HTML标签,没有生成任何页面效果,仅仅向客户端输出一个字符串

Ajax使用XMLHttpRequest发送请求时,XMLHttpRequest发送请求时所有参数使用UTF-8字符集进行编码,因此request调用setCharacterEncoding(“UTF-8”)来设置编码所用的字符集,才能获得正确的请求参数

生成响应时一定要使用Response的setContentType方法设置响应内容和编码方式,尤其值得指出的是:不能仅使用response.setHeader(“Charset”,”GBK”);语句,仅使用该语句只能设置采用GBK编码进行编码,但并没有制定响应内容是HTML页面

如果响应数据相当简单,可以直接使用控制器生成客户端响应,但如果需要生成的响应非常复杂 ,即响应数据量很大,而且具有丰富的表现格式,则应考虑将请求转发到JSP页面,让JSP页面负责生成响应,对于服务器响应是否需要由JSP生成,应取决于响应数量及表现格式

使用JSP生成响应:

Request.setAttribute(“msg”,msg);

//转发到JSP 页面

Request.getRequestDispatcher(“view.jsp”).forward(request,response);

View.jsp

<%@ page contentType=”test/html;charset=GBK” errorPage=”error.jsp”%>

<%--输出当天的聊天信息--%>

${requestScope.msg

解析服务器响应:

1.       在解析服务器响应之前,先判断服务器响应是否完成,以及响应是否正确

为了判断响应是否完成,响应是否正确,XMLHttpRequest提供了两个属性:

1.       readyState:判断服务器响应的状态,其中4表明响应完成

2.       status:判断服务器响应对应的状态码,其中200表明响应正常,404表明资源丢失,500表示内部错误

判断完响应状态后,可以使用responseText属性获取服务器响应文本,并将该文本输出到页面显示

//处理返回信息函数

Function processResponse()

{

  //当XMLHttpRequest读取服务器响应完成

   If(XMLHttpRequest.readyState == 4)

{

    //服务器响应是否正确

  If(XMLHttpRequest.status = 200){

      Document.getElementById(“”).value = XMLHttpRequest.responseText;

}

Else{

 Window.alert(“您所请求的页面有异常…….”);

}

}

}

抱歉!评论已关闭.