AJAX.basic

Posted szllq2000

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX.basic相关的知识，希望对你有一定的参考价值。

之前在项目中使用ajax都是通过jQuery的Ajax API来进行的，今天试了一下通过基本的JavaScript来进行ajax请求，将代码记录下来：

jsp 页面
[xhtml] view plain copy
  1. <%@ page pageEncoding="UTF-8"%>    
  2.     
  3. >    
  4. <html>    
  5.   <head>    
  6.     <title>Ajaxtitle>    
  7.     <script type="text/javascript" src="media/js/jquery.js" mce_src="media/js/jquery.js">script>    
  8.     <script type="text/javascript" src="media/ajax.js" mce_src="media/ajax.js">script>    
  9.   head>    
  10.       
  11.   <body>    
  12.     Ajax.jsp<br/>    
  13.     <div id="msg" style="width:400px;height:200px;margin:1em;padding:1em;border:1px solid #DD6900">    
  14.     啦啦啦    
  15.     div>    
  16.     <button id="start" style="margin:1em;border:1px solid #DD6900" mce_style="margin:1em;border:1px solid #DD6900">Start Ajaxbutton>    
  17.   body>    
  18. html>  
进行ajax请求的js 代码，可以附带一些json和xml数据（必须是post方法）
[javascript] view plain copy
  1. var xmlHttp;    
  2. function createXMLHttpRequest() {    
  3.     if (window.ActiveXObject) {    
  4.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    
  5.     }    
  6.     else if (window.XMLHttpRequest) {    
  7.         xmlHttp = new XMLHttpRequest();    
  8.     }    
  9. }    
  10. var okFunc = function(){    
  11.     if(xmlHttp.readyState == 4) {    
  12.         if(xmlHttp.status == 200) {    
  13.             $("#msg").html(xmlHttp.responseText);    
  14.         }    
  15.     }    
  16. }    
  17. var startAjax = function(){    
  18.     $("#msg").html("Loading...");    
  19.     createXMLHttpRequest();    
  20.     if( !xmlHttp){    
  21.         return alert(‘create failed‘);    
  22.     }    
  23.     xmlHttp.open("POST", "Test", true);    
  24.     xmlHttp.onreadystatechange = okFunc;    
  25.     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
  26.     xmlHttp.send(document);    
  27. }    
  28. $(document).ready(function(){    
  29.     $("#start").click(startAjax);    
  30.     $.post("Test",{‘name‘:‘Hello‘,‘age‘:22});    
  31. });  
 

在服务器端的Servlet：

java 代码
[java] view plain copy
  1. package ajax;    
  2.     
  3. import java.io.BufferedReader;    
  4. import java.io.IOException;    
  5. import java.io.PrintWriter;    
  6.     
  7. import javax.servlet.ServletException;    
  8. import javax.servlet.http.HttpServlet;    
  9. import javax.servlet.http.HttpServletRequest;    
  10. import javax.servlet.http.HttpServletResponse;    
  11.     
  12. public class Test extends HttpServlet {    
  13.     public void doGet(HttpServletRequest request, HttpServletResponse response)    
  14.             throws ServletException, IOException {    
  15.         BufferedReader reader = request.getReader();    
  16.         String line = null;    
  17.         while((line = reader.readLine()) != null) {    
  18.             System.out.println(line);    
  19.         }    
  20.         System.out.println("Start writing");    
  21.         response.setContentType("text/html");    
  22.         PrintWriter out = response.getWriter();    
  23.         out.println(");    
  24.         out.flush();    
  25.         out.close();    
  26.     }    
  27.     
  28.     @Override    
  29.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)    
  30.             throws ServletException, IOException {    
  31.         doGet(req, resp);    
  32.     }    
  33.         
  34. } 

以上是关于AJAX.basic的主要内容，如果未能解决你的问题，请参考以下文章