用基本的JS进行Ajax请求笔记
之前在项目中使用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);
}
}