ajax01小程序

1.创建动态web工程

2.编写HelloAjaxServlet类，让这个类继承HttpServlet，并重写doget和dopost方法

如：

package org.itat.zttc.ajax;

import java.io.IOException;

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

public class HelloAjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException {
// TODO 自动生成的方法存根
doPost(req,resp);
}
@Override
protected void doGet(HttpServletRequest req,IOException {
System.out.println("ajax come");
resp.getWriter().write("ajax comming");
}
}

3编写web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee                       http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name>ajax01</display-name>
    <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>AjaxServlet</servlet-name>  
    <servlet-class>org.itat.zttc.ajax.HelloAjaxServlet</servlet-class>  
</servlet>   
	<servlet-mapping>
		<servlet-name>AjaxServlet</servlet-name>
		<url-pattern>/ajax.do</url-pattern>
	</servlet-mapping>
</web-app>

4运行tomcat并，访问http://localhost:8080/工程名/ajax.do

第一个简单的小程序就ok啦！

然后接着做

创建ajax.html，根据浏览器的不同，创建对应的ajax对象。

<!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>
<script type="text/javascript">
window.onload = init;
function init() {
	var btn = document.getElementById("getData");
	btn.onclick = getData;
}
function getData() {
	//1、创建XMLHttpRequest对象
	//var xhr = new XMLHttpRequest();
	//通过createXmlHttpRequest来屏蔽不同浏览器之间的对象创建
	var xhr = createXmlHttpRequest();
	//2、检测XMLHttpRequest对象的状态，在合适的时候处理
	//通过xhr.open方法确定要访问的页面
	//第一个参数表示请求类型，第二个参数表示提交的地址，第三个参数表示是否是异步
	xhr.open("GET","ajax.do",true);
	//在onreadstatechange事件中处理请求
	xhr.onreadystatechange = function() {
		//onreadystatechange会在每个步骤都进行响应 ，一般仅仅只是在状态为4(请求结束)并且status=200(请求没有错误)时才处理
		if(xhr.readyState==4&&xhr.status==200) {
			//获取相应的文本:通过xhr的responseText可以获取文本信息，包括xml的标签
			//通过responseXML可以获取xml的信息，只能xml对象
			document.getElementById("serverData").innerHTML = xhr.responseText;
		}
	}
	//3、发送请求
	//发送请求，send中可以传入相应的参数，这个参数只有在POST请求的时候有效
	//GET的参数直接在请求地址中通过？来传递
	xhr.send();
}

function createXmlHttpRequest() {
	if(window.XMLHttpRequest) {
		//针对其他主流浏览器
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		//针对IE5和IE6
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("你使用的浏览器不支持XMLHttpRequest，请换一个浏览器再试！");
		return null;
	}
}
</script>
</head>
<body>
<input type="button" value="获取数据" id="getData"/>
<div id="serverData"></div>
</body>
</html>

ajax01小程序

猜你在找的Ajax相关文章