对ajax的初步认识

目录

一、ajax简介

二、ajax语法介绍

1.XMLHttpRequest对象方法

 2.XMLHttpRequest对象属性

三、第一个Ajax

 四、传值

1.get方式传值

 1.post方式传值

---

一、ajax简介

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），Ajax可以实现异步请求。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。

二、ajax语法介绍

1.XMLHttpRequest对象方法

 2.XMLHttpRequest对象属性

三、第一个Ajax

<script type="text/javascript">
		var xmlHttp;
		//1.创建XMLHttpRequest对象
		function test() {
			try { //Firefox, Opera 8.0+, Safari
				xmlHttp = new XMLHttpRequest();
			} catch (e) {
				try { //Internet Explorer
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
						alert("不支持Ajax！");
					}
				}
			}
			//2.建立与服务器的连接
			xmlHttp.open("GET","${pageContext.request.contextPath}/servlet/AjaxDemo1?time=" + new Date().getTime());
			//3.向服务器发送数据
			xmlHttp.send(null);
			//4.设置回调函数，接受服务器返回的数据
			//注意：readyState的状态变化都会触发onreadystatechange事件
			xmlHttp.onreadystatechange = showInfo;
		}

		function showInfo() {
			//alert(xmlHttp.readyState);
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200 || xmlHttp.status == 304) {//304表示服务器的内容没有变化
					document.getElementById("div1").innerHTML = xmlHttp.responseText;
				}
			}

		}
	</script>

          Servlet：

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		System.out.println("ddd");
		//response.getWriter().write("HelloWord!");
		response.getWriter().print("idea");
		
	}

 四、传值

1.get方式传值

xmlHttp.open("get","${pageContext.request.contextPath}/servlet/TestServlet?name=haoren							&password=123&time="+ new Date().getTime());	
			xmlHttp.send(null);

 1.post方式传值

xmlHttp.open("post","${pageContext.request.contextPath}/servlet/TestServlet?time="+ new Date().getTime());	
			//post方式是通过send把参数发送给服务器端，所以一定要指定发的类型，					//"content-type","application/x-www-form-urlencoded"为普通的表单类型，表单默认就是这个			类型
			xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
			xmlHttp.send("name=好人&password=123");