Ajax和Jquery的了解和用法

一、 Ajax

1. 是什么？

1.1. 是异步的javaScript和xml，并不是新的技术，只是把原有的技术，整合到一起而已
1.1.1. 使用css和xhtml来表示
1.1.2. 使用dom模型来交互和动态显示
1.1.3. 使用xmlHttpRequest来和服务器进行异步通讯
1.1.4. 使用javaScript来绑定和调用

2. 有什么用？
2.1. 直接刷新局部内容，不用重新载入整个页面。

3. 如何使用？

3.1. 创建XmlHttpRequest对象；（直接调用ajaxFunction的方法）

function ajaxFunction(){
   var xmlHttp;
   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){}
	      }
    }
	return xmlHttp;
 }

3.2. 发送请求(两种方式)

-Var Xmlrequest=ajaxFunction();

第一种：get方式
/**
参数一：请求方式 post,get
参数二：请求路径
参数三：是否异步：True:异步；False：同步；
**/

Xmlrequest.open(“GET”，”url（请求的servlet的路径）“，true);

-加入需要发送数据的话，直接在url后面添加。

Xmlrequest.send();

第二种：post方式
-不带数据时，发送请求

Xmlrequest.open(“POST”，url，true);
Xmlrequest.send();

-加入需要发送数据时，

Xmlrequest.setRequestHeader(“content-type”,”application/x-www-form”);
Xmlrequest.send(“参数名=参数值&…“);

3.3. 获取数据

//获取响应数据（类似与注册监听，状态发生改变，执行方法）
Xmlrequest.onreadystatechange=function(){
	If(xmlrequest.readystate==4&&xmlrequest.status==200){
//获取请求的数据（response.getWriter.write(…);）
String mess=xmlrequest.responseText;
}
}

二、 Jquery

导入 jquery-1.11.3.min.js。

1. 是什么？

1.1.	JavaScript的代码框架

2. 有什么用?
2.1. 简化代码，提高效率
2.2. 核心：write less do more.

3. 怎么用？
3.1. Load()方法：
1) //$(“#text01”)—document.getElementById(“text01”);
2) 使用a标签使用onclick事件，load方法，有两次刷新，先执行onclick方法，赋值显示，在执行href=””的路径，但是没有给定值，所以会把当前页面在刷新一次，所以导致看不见。
3) //找到这个元素，去执行加载的动作，加载/day06/DemoServlet02,得到的数据，赋值显示

$(“aaa”).load(“/day06/DemoServlet02”,function（responseText,statusTxT,xhr）{
//找到id为text01的元素，设置他的value属性值为responseText对应得值
$(“#aaa”).val(responseText);
});

3.2. Get（）方法
3.2.1. $.get(url,callback);
-callback是一个函数

$.get(“/day06/DemoServlet02”,function(data,status){
//设置数据
$(“#div01).html(“aaa=”+data);
//$(“#div01).text(“aaa=”+data);
//$(“#div01).val(“aaa=”+data);
//赋值显示：三种
	-val(“aa”):只能放带有value的标签
	-html（）；对html样式修改
	-text();

});
<div id=”div01”></div>

3.3. Load && get
3.3.1. $(“#元素id”).load(URL);
$(“#div01).load(servlet);-使用get请求，回来赋值时候，使用text();去赋值；
3.3.2. $.get(URL,callback);
3.4. Post（）方法
3.4.1. 语法格式

$.post(URl,data,callback);(平常开发中常用的)

3.5. 案例演示
3.5.1. 仿百度提示（页面搭建）

Display:设置是否可见；
Position:定位:

3.5.2. 省市联动案例

3.6. 服务器和客户端数据传输的方式
3.6.1. Xml
3.6.2. Json
3.6.2.1. 阅读性更好、容量更小。

  -{“name”:”tom”,”age”:”10”}

Figure 1没有response.getWriter.write(jsonArray);回调到json中