11.4_Ajax & Jquery

一、Ajax是什么?

　　Asynchronous Javascript And XML（异步JavaScript和XML），

　　并不是新的技术，只是把原有的技术，整合到一起而已。

　　　　1.使用CSS和XHTML来表示。
　　　　2. 使用DOM模型来交互和动态显示。
　　　　3.使用XMLHttpRequest来和服务器进行异步通信。
　　　　4.使用javascript来绑定和调用。

二、有什么用?

　　网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

三、数据请求 Get

　　1.创建对象

　　2. 发送请求

　　　　//执行get请求
　　　　function get() {
　　　　　//1. 创建xmlhttprequest 对象
　　　　　　var request = ajaxFunction();

　　　　 2. 发送请求。

　　　　参数一：请求类型 GET or POST
　　　　参数二：请求的路径
　　　　参数三：是否异步， true or false
　　　　request.open("GET" ,"/day16/DemoServlet01" ,true );
　　　　request.send();
}

　　　　如果发送请求的同时，还想获取数据，那么代码如下

　　　　　　//执行get请求
　　　　　　function get() {

　　　　　　//1. 创建xmlhttprequest 对象
　　　　　　var request = ajaxFunction();

　　　　　　//2. 发送请求
　　　　　　request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );

　　　　　　//3. 获取响应数据注册监听的意思。一会准备的状态发生了改变，那么就执行 = 号右边的方法
　　　　　　request.onreadystatechange = function(){
　　　　　　//前半段表示已经能够正常处理。再判断状态码是否是200
　　　　　　if(request.readyState == 4 && request.status == 200){
　　　　　　//弹出响应的信息
　　　　　　alert(request.responseText);
　　　　　　}
　　　　}
　　　　　　　　request.send();
　　}

四、数据请求 Post

　　　　//1. 创建对象
　　　　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;
　　　　}

　　　　function post() {
　　　　//1. 创建对象
　　　　var request = ajaxFunction();

　　　　//2. 发送请求
　　　　request.open( "POST", "/day16/DemoServlet01", true );

　　　　//如果不带数据，写这行就可以了
　　　　//request.send();

　　　　//如果想带数据，就写下面的两行

　　　　//如果使用的是post方式带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
　　　　request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

　　　　//带数据过去，在send方法里面写表单数据。
　　　　request.send("name=aobama&age=19");
　　}

　　　　</script>

　　　　需要获取数据

五、Query是什么?

　　javascript 的代码框架。

六、有什么用?

　　简化代码，提高效率。

七、核心

　　write less do more , 写得更少，做的更多。

　　oad

　　<a href="" onclick="load()">使用JQuery执行load方法</a>

　　有两次刷新，先走 onClick的方法，取到数据回来之后，赋值显示。接着走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。

　　找到这个元素，去执行加载的动作，加载/day16/DemoServlet02 ，得到的数据，赋值显示
　　$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT , xhr) {
　　//找到id为text01的元素，设置它的value属性值为 responseText 对应的值
　　$("#aaa").val(responseText);
　　});

　　Get

　　$.get("/day16/DemoServlet02" , function(data ,status) {
　　$("#div01").text(data);
　　});

#赋值显示

* val("aa");

> 只能放那些标签带有value属性
* html("aa"); ---写html代码
* text("aa");

> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

八、load & get

　　 load

　　$("#元素id").load(url地址);

　　$("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候，使用text（）;去赋值
　　get

　　语法格式： $.get(URL,callback);

　　使用案例： $.get("/day16/DemoServlet02" , function(data ,status) {
　　　　　　　　　　$("#div01").text(data);
　　　　　　　　　});
　　post

　　　　语法格式：$.post(URL,data,callback);

　　　　function post() {
　　　　$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
　　　　　　//想要放数据到div里面去。 --- 找到div
　　　　　　$("#div01").html(data);
　　　　});
　　　　}

猜你喜欢