jquery ajax java_Java学习之路~Day29-JQuery&Ajax

Ajax

简介

Ajax 异步无刷新技术1.AJAX的全称—Asynchronous Javascript and XML异步的Javascript和XML (读法：阿贾克斯 -- A杰克s)

2.AjAX不是编程语言，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

3.传统的网页，要想更新内容或提交一个表单，就要重新载入页面；使用AjAX技术的页面，通过后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新；

Ajax三步骤

运用HTML和CSS实现页面，表达信息；

运用XMLHttpRequest和web服务器进行数据的异步交换；

HTTP状态码1XX：信息类，表示收到Web浏览器请求，正在进一步处理中

2XX:成功，表示用户请求被正确接收

3XX:重定向，表示请求没有成功，客户必须采取进一步动作

4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在

5XX:服务器错误，表示服务器不能完成对请求的处理，如：500

XMLHttpRequest发送请求：

open(method,url,async)method：规定HTTP发送请求的方式是get还是post,不区分大小写，一般来说用大写

url：请求地址(相对地址或绝对地址)

async:同步/异步(false/true)，默认是异步也就是true，可以不用填写

send(string):发送到服务器(该参数可以填或者不填-----get方法不填或填null，post:一般要填)

XMLHttpRequest如何取得响应通过readystate属性知道服务器是否响应，只要4完成即可

readyState属性的变化代表服务器响应的变化

0：请求未初始化，open还没有调用

1：服务器连接已建立，open已经调用了

2：请求已接收，也就是接收到头信息了

3：请求处理中，也就是接收到了响应主体

4：请求已完成，且响应已就绪，也就是响应完成了

通过onreadystatechange事件 ，对readyState属性进行监听即对服务器的响应进行监听，

运用JavaScript操作DOM，实现动态局部刷新；

同步和异步

同步：

用户填写所有信息后，提交给服务器，等待服务器的回应(检验数据)，是一次性的。信息错误又要重新填写！

异步：

当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验。

Ajax实现流程

XMLhttpRequest对象来实现这一功能，也需要javascript来操作DOM实现局部的信息更新。不需要重新加载整个页面

同步请求实现：

1.得到核心对象XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2.准备/打开请求

open(请求类型GET/POST,请求的路径,是否异步true/false);

3.发送请求

send(参数/null);

注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;

如果是post请求，有参数则设置参数，无参数设置为null;

4.解析响应数据

1、判断响应是否成功 status=200 (404=未找到资源;500=服务器异常;200=成功)

2、得到后台响应数据 responseText

var xhr = new XMLHttpRequest();

console.log(xhr);

// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false);

xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求 // 3、发送请求 send(参数/null);

xhr.send(null);

// 4、解析响应数据

if (xhr.status == 200) { // 1、判断响应是否成功 status=200

// 2、得到后台响应数据 responseText

console.log(xhr.responseText);

var user = JSON.parse(xhr.responseText);

console.log(user);

console.log(user.uname);

}else{

alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText); }

异步请求实现：

1.得到核心对象XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2.准备/打开请求

open(请求类型GET/POST,请求的路径,是否异步true/false);

3.发送请求

send(参数/null);

注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;

如果是post请求，有参数则设置参数，无参数设置为null;

4.解析响应数据

1、判断响应是否成功 status=200 (404=未找到资源;500=服务器异常;200=成功)

2、得到后台响应数据 responseText

// 1、得到核心对象XMLHttpRequest对象 var xhr = new XMLHttpRequest();

console.log(xhr);

// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false); xhr.open("GET","js/data.json?uname=zhangsan&uage=10",true); // 异步请求 // 3、发送请求 send(参数/null); xhr.send(null);

// 监听readystate事件 (0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收) xhr.onreadystatechange = function() {

// 如果是异步请求，需要等待数据完全响应后再做处理 if (xhr.readyState == 4) {

// 4、解析响应数据 if (xhr.status == 200) { // 1、判断响应是否成功 status=200 // 2、得到后台响应数据 responseText console.log(xhr.responseText);

var user = JSON.parse(xhr.responseText);

console.log(user);

console.log(user.uname);

} else {

console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);

}

}

}

GET/POST请求类型GET: 一般用于信息的获取，使用URL传递参数，对发送信息的数量也有限制，一般在2000字符！默认方式，一般用于查询、获取操作,不是很安全，任何人可见，信息都显示在URL中

POST：一般用于修改服务器上的资源，对所发送的数量无限制。一般用于发送表单数据，新建，修改，删除等操作，要安全一些，不在URL中显示，对其他人不显示。

POST请求测试代码

// 1、得到核心对象XMLHttpRequest对象 var xhr = new XMLHttpRequest();

console.log(xhr);

// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false); xhr.open("POST","js/data.json",true); // 异步请求 // 由于Post请求的机制问题，需要模拟表单提交 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

// 3、发送请求 send(参数/null); xhr.send("uname=zhangsan&uage=10"); // post请求如果有参数，需要将参数设置在send方法中 // 监听readystate事件 (0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收) xhr.onreadystatechange = function() {

// 如果是异步请求，需要等待数据完全响应后再做处理 if (xhr.readyState == 4) {

// 4、解析响应数据 if (xhr.status == 200) { // 1、判断响应是否成功 status=200 // 2、得到后台响应数据 responseText console.log(xhr.responseText);

var user = JSON.parse(xhr.responseText);

console.log(user);

console.log(user.uname);

} else {

console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);

}

}

}

get和post区别1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来。

2.使用Get请求发送数据量小,Post请求发送数据量大。

3.get请求需注意缓存问题,post请求不需担心这个问题。

4.post请求必须设置Content-Type值为application/x-form-www-urlencoded。

5.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数。

Ajax封装测试代码