Ajax的基础知识

来源：互联网发布：网络借贷平台哪个方便编辑：程序博客网时间：2024/05/16 12:43

一，什么是Ajax？

Ajax：无需刷新当前页面就可以实现与服务器交互的技术，是一系列技术的集合

二，Ajax的相关技术

XMLHttpRequest对象实现客户端与服务器的通信
JavaScript实现了无刷新改变局部页面内容
ASP，JSP，Servlet，PHP可以接收XMLHttpRequest对象发送的请求，对这个请求进行一系列操作
XML文档格式f返回操作后的结果
DOM对XML文档结点进行解析。

三，XMLHttpRequest对象

XMLHttpRequest对象是微软在IE提供的一个组件。

1.创建XMLHttpRequest对象：

   function createXMLHttpRequest()        {            if(window.XMLHttpRequest) //判断浏览器是否通过JavaScript本地方法支持XMLHttpRequest对象，如果支持，就创建（除IE其他浏览器创建对象的方法）            {                XMLHttpReq=new XMLHttpRequest();            }            else            {              try{                if(window.ActiveXObject)   //判断浏览器是否支持ActiveX（在IE中使用ActiveX支持XMLHttpRequest），支持创建，以下是不同版本IE的创建方法                {                    XMLHttpReq=new ActiveXObject("Msxm12.XMLHTTP");                }                }catch(e)                {                    try{                       XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");                    }catch(e){}                }            }        }

2.常用方法和属性：

（1）open(String method,String url,boolean asynch,String name,String password):建立对服务器的调用

前两个参数是必需的：
method：可以是Post或Get
url：指所要访问的服务器资源的位置
asynch：指异步访问服务器还是同步，默认异步访问
name,password：使用指定用户名和密码访问服务器资源

（2）send(content) ：向服务器发送请求，参数会作为请求中的内容发送到服务器中

（3）常用属性：

readyState：描述请求的状态，可以取以下5个值：0（未初始化），1（正在加载），2（已加载），3（交互中），4（已完成）
onreadystatechange：每个状态的改变都会调用这个时间处理器，可以监听状态的变化，并提供对应的处理方法
status：描述服务器的状态码
statusText：描述可HTTP状态码对应的文本
responseText：服务器以文本字符串返回的响应
responseXML：服务器以XML格式返回的响应

四，客户端向服务器发送请求

1.使用XMLHttpResquest对象发送请求

在发送请求之前，使用对象的open方法建立对服务器的调用，才能发送请求。而且需要指明在请求状态发生改变的时候需要调用的时间处理方法（Ajax中一般都会实现一个JavaScript函数来处理请求状态变化时间）

2.常用发送请求的内容的方法

（1）显示传参，和Web页面中通过超链接传值方式的原理一样。使用这个方法向服务器发送信息时，send(content)中的参数就可以使用null来代替。（例如：http://localhost:8080/Test/Hello?name="kitty"&password="1234" 这个URL，访问的是Helllo,建立服务器调用同时传递参数:name和password）

（2）内容较复杂时，将发送的内容组织成XML文档格式，通过send(content)方法将参数内容发送到服务器（content就是参数内容）

代码示例：

  function sendRequest(url)        {             createXMLHttpRequest();             XMLHttpReq.open("GET", url, true);             //指定响应函数             XMLHttpReq.onreadystatechange=handleResponse;             XMLHttpReq.send(null);                   }

五，服务器处理用户请求

1.在服务端处理用户请求

（1）超链接传递参数时，通过request.getParameter（“参数名称”）获取参数值，然后进行对应的逻辑操作

（2）XML格式发送请求信息时，使用DOM或SAX从XML文档中取出需要的信息，然后进行对应的逻辑操作

2.返回XML格式的响应文档

代码示例：

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html charset=UTF-8");response.setHeader("Cache-Control","no-cache");PrintWriter out = response.getWriter();String output="";                output="<response>"+XML文档内容+"</response">                out.println(output);                out.close();}

六，客户端处理服务器响应

服务器以XML文档的格式返回逻辑处理的结果，在客户端对返回内容进行处理。然后根据处理结果对页面内容进行调整。到这一步，客户端与服务器的异步通信就完成了

（1）分析XML文档的格式

在客户端可以用XMLHttpRequest对象取得响应文档的内容

在JavaScript中，可以DOM方式分析文档

代码示例：

  function handleResponse()        {           if(XMLHttpReq.readyState==4)           {              if(XMLHttpReq.status==200)              {                  var out="";                  var res=XMLHttpReq.responseXML;  //取出XML响应文档                  var response=res.getElementsByTagName("response")[0].firstChild.nodeValue;                  document.getElementById("result").innerHtml=response;              }           }        }

（2）使用JavaScript调整页面内容

使用innerText或innerHTML可以设置HTML页面元素的显示内容，DOM可以动态创建HTML元素，CSS控制HTML元素的显示风格

通过这些，将处理结果显示到页面上，而且从始至终不会对页面进行刷新。

阅读全文

0 0