用根本的JS进行Ajax请求笔记
日期：2014-05-16 浏览次数：20335 次
之前在项目中使用ajax都是通过JQuery的Ajax API来进行的，今天试了一下通过基本的Javascript来进行ajax请求，将代码记录下来：
?
jsp 页面
[xhtml] view plaincopy
<%@ page pageEncoding="UTF-8"%> ? ?
?
> ? ?
<html> ? ?
? <head> ? ?
? ? <title>Ajaxtitle> ? ?
? ? <script type="text/javascript" src="media/js/jquery.js" mce_src="media/js/jquery.js">script> ? ?
? ? <script type="text/javascript" src="media/ajax.js" mce_src="media/ajax.js">script> ? ?
? head> ? ?
?
? <body> ? ?
? ? Ajax.jsp<br/> ? ?
? ? <div id="msg" style="background-color:#EEEEEE;width:400px;height:200px;margin:1em;padding:1em;border:1px solid #DD6900"> ? ?
? ? 啦啦啦 ? ?
? ? div> ? ?
? ? <button id="start" style="margin:1em;border:1px solid #DD6900" mce_style="margin:1em;border:1px solid #DD6900">Start Ajaxbutton> ? ?
? body> ? ?
html> ?
?
进行ajax请求的js 代码，可以附带一些json和xml数据（必须是post方法）
[javascript] view plaincopy
var xmlHttp; ? ?
function createXMLHttpRequest() { ? ?
? ? if (window.ActiveXObject) { ? ?
? ? ? ? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ? ?
? ? } ? ?
? ? else if (window.XMLHttpRequest) { ? ?
? ? ? ? xmlHttp = new XMLHttpRequest(); ? ?
? ? } ? ?
} ? ?
var okFunc = function(){ ? ?
? ? if(xmlHttp.readyState == 4) { ? ?
? ? ? ? if(xmlHttp.status == 200) { ? ?
? ? ? ? ? ? $("#msg").html(xmlHttp.responseText); ? ?
? ? ? ? } ? ?
? ? } ? ?
} ? ?
var startAjax = function(){ ? ?
? ? $("#msg").html("Loading..."); ? ?
? ? createXMLHttpRequest(); ? ?
? ? if( !xmlHttp){ ? ?
? ? ? ? return alert('create failed'); ? ?
? ? } ? ?
? ? xmlHttp.open("POST", "Test", true); ? ?
? ? xmlHttp.onreadystatechange = okFunc; ? ?
? ? xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ? ?
? ? xmlHttp.send("name=zhangsan"); ?//参数 ?
} ? ?
; ?
?
在服务器端的Servlet：
java 代码
[java] view plaincopy
package ajax; ? ?
?
import java.io.BufferedReader; ? ?
import java.io.IOException; ? ?
import java.io.PrintWriter; ? ?
?
import javax.servlet.ServletException; ? ?
import javax.servlet.http.HttpServlet; ? ?
import javax.servlet.http.HttpServletRequest; ? ?
import javax.servlet.http.HttpServletResponse; ? ?
?
public class Test extends HttpServlet { ? ?
? ? public void doGet(HttpServletRequest request, HttpServletResponse response) ? ?
? ? ? ? ? ? throws ServletException, IOException { ? ?
? ? ? ? BufferedReader reader = request.getReader(); ? ?
? ? ? ? String line = null; ? ?
? ? ? ? while((line = reader.readLine()) != null) { ? ?
? ? ? ? ? ? System.out.println(line); ? ?
? ? ? ? } ?
//request.getParameter("name");
? ? ? ? System.out.println("Start writing"); ? ?
? ? ? ? response.setContentType("text/html"); ? ?
? ? ? ? PrintWriter out = response.getWriter(); ? ?
? ? ? ? out.println("success"); ? ?
? ? ? ? out.flush(); ? ?
? ? ? ? out.close(); ? ?
? ? } ? ?
?
? ? @Override ? ?
? ? protected void doPost(HttpServletRequest req, HttpServletResponse resp) ? ?
? ? ? ? ? ? throws ServletException, IOException { ? ?
? ? ? ? doGet(req, resp); ? ?
? ? } ? ?
?
} ?
