ajax异步刷新 局部刷新,实现异步局部刷新Ajax详解【2019】

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Ajax是什么?

ajax意为“Asynchronous Javascript And XML”(异步JavaScript和XML)，并不是新的技术，只是把原有的技术，整合到一起而已

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

Ajax有什么用？

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

数据请求 Get

1.创建对象

2. 发送请求

//执行get请求

functionget() {

//1.创建xmlhttprequest 对象

varrequest = 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=newActiveXObject("Msxml2.XMLHTTP");

}

catch (e){

try{

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

}

catch (e){}

}

}

returnxmlHttp;

}

functionpost() {

//1.创建对象

varrequest = 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");

}

functionpost() {

//1.创建对象

varrequest = 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中的ajax

其实在实际开发过程中最常用的是jQuery中的ajax，因为jq中的ajax写起来方便省事，毕竟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);

});

并且拥有着独特的格式：

* 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);

functionpost() {

$.post("/day16/DemoServlet02",{name:"zhangsan",age:18},function(data,status) {

//想要放数据到div里面去。 --- 找到div

$("#div01").html(data);

});

}