Ajax学习

Ajax概念

问题：目前来，所有的请求的发送都是通过浏览器自己直接进行发送，响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保留原有页面内容的情况下显示新的响应内容.

解决:使用ajax技术

ajax原理:请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，而是流转给发请求的ajax引擎对象。这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。

本质：js的DOM操作中的数据由程序员自己写死声明，变成从服务器动态的获取。

Ajax使用

创建ajax引擎对象
覆写onreadystatechange函数
- 判断数据状态码(ajax.readyState)
- 判断响应状态码(ajax.status)
- 获取响应数据
- 处理响应数据(js的DOM操作)
创建并发送请求
- ajax.open(method,url,async)
- ajax.send(“请求数据”)
- 解释
  - method：表示请求的方式，值为get/post
  - url:表示请求地址，一般为要请求的servlet的别名。
  - async:表示异步还是同步请求， true表示异步， false表示同步，默认为异步。
- 注意
  - 如果请求方式是get方式，则请求数据需要拼接在url的后面，以？隔开，键值对。并且send中要写null。
  - 如果是post请求方式，则在send方法中书写请求数据即可。并且要声明数据的提交格式为键值对。
  - get方式提交经常会遇到浏览器缓存问题，浏览器不对同样的url重复提交。这时可以在url后面增加参数：?rand = Math.random() 或者：rand = new Date()

Ajax的响应数据格式

普通文本：后台在接收到ajax请求后，处理后直接响应普通字符串给ajax
josn数据：后台在接收到ajax请求后，处理后响应json格式的字符串给ajax.ajax处理代码中使用eval()方法将json数据转换为js对的对象，将对象中的数据通过js的dom操作显示到页面中。
注意：json格式：var 对象名={键名:值,键名:值,……..}
xml数据:后台在接收到ajax请求后，处理后响应xml格式的字符串给ajax。
- 前台使用ajax.responseXML进行数据接收，返回的是xml文档对象(document)。使用document对象将xml中取出并显示到页面中即可
- 注意：后台的响应数据格式必须设置成xml格式：resp.setContentType(“text/xml;charset=utf-8”);

注意：ajax是前端的技术，由浏览器进行解析执行。

<%@ 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>
<!-- 声明js代码域 -->
<script type="text/javascript">
	function getData(){		
		//创建ajax引擎对象
			var ajax;
			if(window.XMLHttpRequest){//火狐
				ajax=new XMLHttpRequest();
			}else if(window.ActiveXObject){//ie
				ajax=new ActiveXObject("Msxml2.XMLHTTP");
			}
		
			//复写onreadystatement函数
			ajax.onreadystatechange=function(){
			//判断Ajax状态码
			if(ajax.readyState==4){
				//判断响应状态码
				if(ajax.status==200){
					//获取响应内容
					var result = ajax.responseText;
					//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML=result;
				}else if(ajax.status==404){
					//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="请求资源不存在!";
				}else if(ajax.status==500){
					//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="服务器繁忙!";
			}
		}else{
					//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";
				} 
	}
		//发送请求
		ajax.open("get","ajax",true);
		ajax.send(null);
		alert("哈哈");
}
</script>
<style type="text/css">
	#showdiv{
		border:solid 1px;
		width:200px;
		height:100px; 
	}
</style>
</head>
<body>
	<h3>欢迎登录403峡谷</h3>
	<hr>
	<input type="button" value="测试 " onclick="getData()"/>
	<div id="showdiv"></div>
</body>
</html>

package com.kylin.servlet;

import java.io.IOException;

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


@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置请求编码格式
		req.setCharacterEncoding("utf-8");
		//设置响应编码格式
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		//获取请求信息
			String name = req.getParameter("name");
			String pwd = req.getParameter("pwd");
			System.out.println(name+":"+pwd+":"+req.getMethod());
		//处理请求信息
		//响应处理结果
		resp.getWriter().write("你好Ajax");
	}java
}