JS类库Jquery(二):优雅的使用JQuery写Ajax实现前后端完美互动
Jquery虽然属于比较老的技术,但是相较于原生的JS写起来还是反方便很多,现在流行使用VUE等开源的框架,但是这并非不妨碍咱们进行Jquery的学习,前端程序员成长的过程中Jquery是必须了解的类库之一,后端程序员喜欢简单粗暴,因而Jquery更受他们的欢迎.今天主要聊聊Jquery写Ajax进行异步重新整理.上一篇JQ入门传送.
一、jQuery使用Ajax
想要了解jQuery如何使用Ajax，并且体会到它所带来的方便性，那么就得了解原始的Ajax是如何编写的，是怎样的繁琐，然后和Jquery的程式码进行对比，才会有所悟。
1.1、什么是Ajax？(顺带提一下)
全名：Asynchronous Javascript And Xml[异步javascript和xml]，
同步和异步原理图
同步就是浏览器传送一个请求到服务器端，网址会改变，页面会被重新载入到新的页面。如图
异步就是浏览器传送一个请求到服务器端，网址不会改变，并且页面只是区域性重新整理资料，能够接收服务器返回的资料，如果需要完成这样一个异步的过程，就需要使用Ajax技术，依靠Ajax引擎(XMLHttpRequest)，原理如图
Ajax是什么现在就应该知道了，看上面讲解异步的原理就懂了，总结一句话，Ajax使用异步的方式从浏览器端传送请求，请求服务器端资源，并获得内容的一种技术。
1.2、原始Ajax的用法。
如果编写原始Ajax，那么就要总的分为4步，如下图
第一步：获取Ajax引擎
第二步：通过Ajax引擎执行回拨函式，用来接收服务器端返回回来的资料。
第三步：Ajax引擎建立与服务器端的连线
第四步：传送请求到服务器，并且顺带将资料传输过去
总结：注意第三步和第四步中post请求和get请求的区别，如果是post请求，则需要加第三步中的65行程式码，并且所传输到服务器端的请求引数必须放在第四步的73行程式码中。如果是get请求的话，请求引数就直接放在第三步的62行程式码中(参考第三步的56行解释)，并且第三步中的65行程式码就不需要了，还有第四步中的73行程式码就不需要带请求引数过去，参考70.71的注释。
粘帖一份Ajax传送请求，并接收服务器端的资料的程式码，供参考。谢谢
function sendData(obj){
//alert("失去焦点");
//1 当失去焦点时，获得使用者输入的内容 ，obj 等效 document.getElementById("xxx")
var inputVal = obj.value;
/* 2.1 建立核心类 */
var xmlhttp=null;
if (window.XMLHttpRequest){// code for all new browsers
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.2 设定回拨
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// 3.1 接收服务器响应的资料 ，获得json资料，注意json也是文字
var data = xmlhttp.responseText;
// 3.2 将字串 转换 json 物件
// 如果字串 转换 json 物件时不成功，使用格式：eval("('abc')");
var jsonData = eval("("+data+")");
// 3.3 判断 --控制按钮是否可用
var buttonObj = document.getElementById("buttonId");
var spanObj = document.getElementById("spanId");
if(jsonData.flag){
//可用
buttonObj.removeAttribute("disabled");
spanObj.style.color = "#3D882D";
} else {
//占用
buttonObj.setAttribute("disabled","disabled");
spanObj.style.color = "#CC0000";
}
// 3.4 到指定的位置显示
spanObj.innerHTML = jsonData.msg;
}
};
// 2.3 连线
xmlhttp.open("POST","/day21/Demo04Servlet");
// * 设定编码
xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 2.4 传送
xmlhttp.send("username=" + inputVal);
}
--%>
使用者名称：
密码：
1.3、jQuery使用Ajax
1.3.1、Ajax请求
第一层，最原始层，$.ajax ,一般不使用，完成更强大功能时需要使用。例如：如果出错了，给出提示
第二层，load、$.get 、$.post 开发中常使用用于处理ajax
第三层，$.getJSON $.getScript 优化辅助
一行程式码搞定。但是jQuery使用Ajax有很多种用法，现在一一来介绍。
1、load的用法
必须在jQuery物件上触发函式，传送ajax请求
格式：load(url, [data], [callback])
url：请求路径
data：请求引数。引数格式为JSON
如果有引数，将是POST请求
如果没有引数，将是GET请求
callback：成功之后回拨，具有三个引数
第一个引数：返回值(一般为json，看返回的是什么)
第二个引数：状态，其值可能是succuss，error，notmodify，timeout
第三个引数：ajax引擎XMLHttpRequest
例项：
OneServlet:服务器端响应
客户端传送ajax请求
$(function(){
$("input").click(function(){
var url = "/jQuery_test/OneServlet";//请求服务器端地址
/*
load(url, [data], [callback])
有data，所以是post请求
callback中有一个引数，那么就是其返回值物件，返回值型别是什么，
取决于服务器返回的是什么，如果是json资料，那么需要通过21行
程式码进行转换。
*/
var data = {"username":"jack"};
$(this).load(url,data,function(data){
//需要手动转成json物件
var jsonData = eval("("+data+")");
alert("成功" + jsonData.info);
});
});
});
2、$.get方式
传送的就是get请求
格式：jQuery.get(url, [data], [callback], [type])
前三个引数和load方式一样
type：返回内容格式，xml, html, script, json, text, _default(预设为json格式)
例项：
服务器端
客户端
$( function(){
$("input").click(function(){
var url = "/jQuery_test/OneServlet";//请求服务器端地址
/*
jQuery.get(url, [data], [callback], [type])
*/
var params = {"username":"jack"};
//2 $.get 获得资料为json物件
// * 当传送资料位字串时，通过第四个引数设定型别
// * 服务器端可以通过 MIME型别 确定传送JSON资料
$.get(url,params,function(data){
alert(data.success);
},"json");
});
});
3、$.post方式
跟$.get完全类似。
传送post请求
格式：jQuery.post(url, [data], [callback], [type])
不做解释。一样的。
4、$.ajax方式
底层原始ajax请求方式，出错了，给出提示
常用格式：jQuery.ajax(settings); 使用json格式设定多项资料
看例项就懂了。
服务器端：雷同，不写了。
客户端
//4 $.ajax
// * async 设定是否异步，true：表示异步（ajax）
// * type 设定请求方式。例如：get、post
// * url 设定请求路径
// * data 请求引数
// * dataType 设定资料转换型别，例如：xml, html, script, json
// * success 成功回拨
// * error 错误回拨
$.ajax({
"async":true,
"type":"POST",
"url":url,
"data":params,
"success":function(data){
alert(data);
},
"error" : function(){
alert("错误");
}
});
1.3.2、表单序列化
serialize() 将表单中所有内容转成字串
所有内容：有name，有值（非空）--文字有资料，单选多选选中，下拉列表选中等
字串：key=value&key=value&....
应用场景：$.get，当get请求时，将所有表单元素的内容都发送到服务器端时，不用一个一个拼接，直接使用该函式就搞定了。
serializeArray()将表单中所有内容转成json阵列
serialize()例子
核心程式码。
表单程式码如下
表单
姓名
密码
性别
男
女
爱好
抽烟
喝酒
烫头
我的照片
学历
小班
中班
大班
学前班
普通按钮
公告资讯
未满18慎进
结果如图
看打印的结果，用&拼接而成，就是在get请求引数时放在url后面的格式，所以该应用场景是在$.get时。
serializeArray()例项。
结果
二、总结
复习了一下什么是Ajax，原始的Ajax的编写(4步)，然后使用jQuery物件来编写ajax(一行程式码搞定);使用jQuery的话，要注意服务器端返回json资料时，json资料格式要正确。拒绝错误的编写格式。比如"{'xx':'yy'}"或者"{'xx':xx}"这两种都是错误的格式，
但是在返回的是字串时，可以使用"{'XX':XX"}",然后在页面使用eval进行转换即可。
下一节会讲解一下javascript的跨域资料传输问题(原始方法实现和使用jQuery实现)
本文转载于部落格园续杯凉茶的部落格
