Ajax的基础知识

一,什么是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元素的显示风格

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

   

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值