Ajax&Jquery

Ajax

• 是什么？
  Asynchronous Javascript And XML”（异步JavaScript和XML）

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

注：XMLHttpRequest为js内部对象 

用处：

用来局部刷新，提高用户的体验

数据请求GET

发送请求：

function get(){
	//创建XMLHttp对象
	var request =new XMLHttpRequest();
	//携带参数在地址后面添加
	request.open("get","DemoServlet1?name=zhangsan&age=29",true);
	request.send();
}

获取对象：

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

数据请求post

function post() {
		var request = new XMLHttpRequest();
		request.open("post", "DemoServlet1", true);
		request.onreadystatechange = function() {
			if (request.readyState == 4 && request.status == 200) {
				alert(request.responseText);
			}
		}
		request.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
		//设置参数
		request.send("name=zhangsan&age=28");
	}

JQuery

• 是什么?

javascript 的代码框架。

• 有什么用?

简化代码，提高效率。

• 核心

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

 

load

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

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


	//找到这个元素， 去执行加载的动作， 加载DemoServlet02 ， 得到的数据，赋值显示
	$("#aaa").load("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);

• post

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

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