Ajax&Jquery（十四）

Ajax

• 是什么?

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

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

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

• 有什么用?

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

数据请求 Get

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;
 }

2. 发送请求

//执行get请求
function get() {
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
	//2. 发送请求。
	// http://localhost:8080/day16/demo01.jsp
	//http://localhost:8080/day16/DemoServlet01
	/*	
		参数一： 请求类型  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​

需要获取数据
function post() {
	//1. 创建对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open( "POST", "/day16/DemoServlet01", true );
	
	//想获取服务器传送过来的数据， 加一个状态的监听。 
	request.onreadystatechange=function(){
		if(request.readyState==4 && request.status == 200){
			
			alert("post："+request.responseText);
		}
	}
	
	//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	//带数据过去  ， 在send方法里面写表单数据。 
	request.send("name=aobama&age=19");
}

JQuery

• 是什么?

javascript 的代码框架。

• 有什么用?

简化代码，提高效率。

• 核心

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

load

使用JQuery执行load方法
有两次刷新，先走 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);
    });
  }