AJAX

AJAX

1.概念：ASynchronous javaScript And XML 异步的JavaScript 和 XML
异步和同步：客户和服务端相互通信的基础上

2.实现方式
1.原生JS实现方式（了解)

jsp

	<script type="text/javascript">
		function register(){
			var mobile =  document.getElementById("mobile").value;
			//通过ajax异步方式请求服务端
			xmlHttpRequest = new XMLHttpRequest();
			xmlHttpRequest.open("get","MobileServlet?mobile=" + mobile,true);
			//设置post方式头信息 get不需要
			// xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			 xmlHttpRequest.send(null)//k=v
			//设置xmlHttpRequest对象的回调函数
			xmlHttpRequest.onreadystatechange= callBack;
		}
		//定义回调函数（接受服务端的返回值）
		function callBack(){
			if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status ==200 ){
				//接受服务端返回的数据 获取服务器响应的方式 当服务器响应成功时候获取
				var data  = xmlHttpRequest.responseText ;//服务端返回值为string格式

				if(data == "true"){	
					alert("此号码已存在,请更换");
				}else{
					alert("注册成功");
				}
			}
		}
	</script>
			<input id="mobile"/>
			<br>
			<input type="button" value="注册" onclick="register()"/>

servlet

@WebServlet("/MobileServlet")
public class MobileServlet extends HttpServlet {
       
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=UTF-8");
		
		String mobile = request.getParameter("mobile");
		System.out.println(mobile);
		//假设此时 数据课中只有一个号码17343213225
		PrintWriter out =response.getWriter();
		if("17343213225".equals(mobile)) {
			out.write("true");//servlet以输出流的方式 将信息 返回给客户端
		}else {
			out.write("false");
		}
		out.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2.Jquery实现方式
	1.$.ajax()
			*语法:.ajax({键值对});

jsp

	<script>
		function fun(){
			//使用$.ajax发送
			$.ajax({
				url:"ajaxServlet",  //请求路径
				type:"post",  //请求方式
				//data:"username=jack$age=23",//请求参数
				data:{"username":"jack"},
				success:function(data){
					alert(data);
				},//响应成功后的回调函数
			});
		}
	</script>

	2.$.get
		*语法$.get(url,[data],[callback],[type])
		 	参数:
		 		url:请求信息
		 		data:请求参数
		 		callback：回调函数
		 		type:响应结果的类型

<script>
		function fun(){
			$.get("ajaxServlet",
					{username:"rose"},
					function(data){
					alert(data);
					},"text");
		}
	</script>

	3.$.post

	<script>
		function fun(){
			$.post("ajaxServlet",
					{username:"rose"},
					function(data){
					alert(data);
					},"text");
		}
	</script>

JSON
1.概念：JavaScript Object Notation JavaScript对象表示法
JSON:JavaScript对象表示法。类似XML
*Person p = new Person();
p.setName(“张三”);
p.setGender(“男”);

		var p = {"name":“张三","age":23吗,"gender":男};
		*Json现在多用于储存和交换文本信息的语法.类似XML
		*进行数据的传输

2.语法
1.基本规则
数据在名称/值对中:json数据是由键值对构成的
*键用引号(单双都行）引起来，也可以不使用引号
*值的取值类型
1.数字(整数或浮点数)
2.字符串（在上引号中）
3.逻辑值（true或false)
4.数组（在方括号中) {“person”:[{},{}]}
5.对象(在花括号中) {“address” {“province”:“陕西”…}}
数据由逗号分隔：多个键值对由逗号分隔
花括号保存对象：使用{}定义json格式
方括号存储数组：[]
2.获取数据
1.json对象.键名
2.json对象["键名]
3.数组对象[索引]