您的位置：首页 > 其它

使用原生ajax异步加载数据

2014-09-25 22:24 435 查看

使用原生Ajax异步加载数据

前台代码

index.jsp

<span style="color:#3333ff;"><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="./ajax.js"></script>
<body>
<form name="myForm">
<input type="button" value="现在时间" onclick="ajaxFunction();">
</form>
</body>
</html></span>
ajax.js代码

<span style="color:#3366ff;"><span style="font-size:14px;">function getxmlHttp(){
var xmlHttp;

try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {

// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
function ajaxFunction()
{
var xmlHttp = getxmlHttp();

xmlHttp.onreadystatechange = function() {         //回调函数
if (xmlHttp.readyState == 4) {
if(xmlHttp.status == 200 || xmlHttp == 304){
var data = xmlHttp.responseText;           //返回信息
alert(data);
}
}
};

xmlHttp.open("post", "Deal?a=3&&time="+new Date().toString(), true);
//post方法独有，请求向服务器发送数据，数据已经符合url编码
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("b=5");              //发送数据，当没有时为null
}
</span>

</span>
Deal.java (servlet类)

package cn;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Deal extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html");
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
System.out.println("a="+request.getParameter("a"));
System.out.println("b="+request.getParameter("b"));
writer.write(new Date().getTime()+"get方法");
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html");
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
System.out.println("a="+request.getParameter("a"));
System.out.println("b="+request.getParameter("b"));
writer.write(new Date().toString()+"post方法");
}

}


web.xml 代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>Deal</servlet-name>
<servlet-class>cn.Deal</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Deal</servlet-name>
<url-pattern>/Deal</url-pattern>
</servlet-mapping>
</web-app>

总结：ajax的入门代码，本文使用的是post提交方式，读者可以使用get方式提交，但需要把一下代码删除

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航