AJAX学习总结

最新推荐文章于 2022-04-14 11:32:18 发布

iteye_10626

最新推荐文章于 2022-04-14 11:32:18 发布

阅读量97

点赞数

文章标签： Ajax 浏览器 IE Web XML

本文链接：https://blog.csdn.net/iteye_10626/article/details/81936745

版权

一，AJAX的概念

AJAX是一种局部界面更新方式。简单的说，在B/S格式上给用户C/S的界面观感。AJAX的英文全称是Asynchronous JavaScript and XML，（异步JavaScript和XML技术）。这里稍微解释下：异步是指浏览器向服务器发送请求是异步的，请求发送出去后，不必等得响应便可发送下一条请求（有些多线程的意思）， JS是AJAX的编程语言，异步JS是强调AJAX发送请求的方式。 XML的是指可扩展的标记语言（Extensible Markup Language），AJAX的响应返回都是XML格式的标记语言，方便在网页中操作。

这里介绍下AJAX和普通Web在刷新页面上的区别，先说普通Web，Web向服务器发送一个请求，服务器接收并处理该请求，然后响应到一个新的网页。这是一个完整的请求—响应过程。如果前后两个页面的差别不大，Web中的过程就会浪费许多宽带。网页上只需一点点变动，都要刷新整个网页，这是没有必要的。与此不同，AJAX在这方面就优化了很多，AJAX只需向服务器发送并取回必要的任务，使用XML的Web Service接口，并在客户端用JS处理响应，客户端和服务器端的数据交换大大减少，也加快了响应速度。

二，AJAX的使用方法

首先，创建XMLHttpRequest对象，XMLHttpRequest对象是AJAX的核心API，

XMLHttpRequest是浏览器内置的对象，用来发送异步请求和接收响应。

如IE的是ActiveXObject对象，火狐的是XMLHttpRequest对象，没有配置该对象的浏览器就不可以使用AJAX。

代码示例：

            function getRequestObject(){
	        if(window.ActiveXObject){//IE浏览器
                  request = new ActiveXObject("Microsoft.XMLHTTP"); 
	          }else if(window.XMLHttpRequest){//火狐浏览器
                  request = new XMLHttpRequest();
             	  }else {
                       alert("您电脑的浏览器不支持AJAX");
	          }
            }

然后，用XMLHttpRequest对象向服务器发送请求，这个步骤中，必须绑定回调方法。这里解释下回调方法：在AJAX机制中，发送请求，服务器接收并作出响应后，响应会自动回调到客户端。绑定回调方法是AJAX与普通Web最大的区别所在。回调机制类似监听机制，一旦服务器做出响应，回调方法就会自动捕获该响应，并按方法进行处理。

代码示例：

function sendRequest(){//向服务器发送请求
 getRequestObject();//取得XMLHttpRequest对象
	 //绑定回调方法（特别重要  调用回调方法不用括号）
	   request.onreadystatechange = processResult;

	 //发送请求，还可以用get方式发送
	   request.open("post",url,true);	 
         //post必须添加的信息头处理
	   request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

           request.send("Count="+Count); //发送请求中的参数
    	   
}


function processResult(){//回调方法，响应发出时自动调用该方法
	
	   if(request.readystate==4){//服务器处理完毕
	        if(request.status==200){//将状态做为数字返回  200为OK

           //取得服务器传送的响应内容，并操作Dom组建局部更新页面
           document.getElementById("msgDisplay").inner =request.responseText; 

		  }
	}	   
}

再接上服务器Servlet的代码，用在发送请求后，响应回调前：

public void service(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
      //设置响应输出的格式，此处是HTML格式的 （HTML是XML的一种）
	response.setContentType("text/html;charset=gbk");
      //处理缓存
	response.setHeader("Cache-Control", "no-cache");
      //取得客户端发送过来的参数
        int count = Integer.parseInt(request.getParameter("Count"));

        PrintWriter out = response.getWriter();
      //发送相应给客户端    之后交由回调接方法收并处理
        out.println("客户第"+count+"次发送消息，系统时间是："+System.currentTimeMillis());
	out.flush();
	out.close();

}

此处只是简单介绍了AJAX在JS中的编写方法，没有详细写入HTML中网页设计。但这些JS中的方法是AJAX最根本的东西，理解本质之后才能够在网页界面和服务器的数据交换以及请求—响应的操作中熟练运用。希望这篇文章能让大家对AJAX有进一步的了解。