1、什么是Ajax?
- AJAX = 异步 JavaScript 和 XML。
- AJAX 是一种用于创建快速动态网页的技术。
- 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
- 有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
引用自:AJAX 简介
2、准备一下资源
网页代码如下:
<html>
<head>
<script src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript">...</script>
.
.
.
<script type="text/javascript">...</script>
</head>
<body>
<h2>Hello World!</h2>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)" onclick="mXXXX(this.value)" >
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<p>Suggestions: <span id="loadz"></span></p>
</body>
</html>
mXXXX(this.value)这个js方法替换为后面的事例即可。
jquery的话自己准备,去官网下载就好了。
后台代码如下(代码基于Spring MVC):
package space.xxhui.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("ajax")
public class Ajax {
@RequestMapping("processing")
@ResponseBody
public String processing(@RequestParam("q")String param){
System.out.println(param+"-");
return param+"-";
}
@RequestMapping("load")
@ResponseBody
public String load(String mString){
System.out.println(mString);
return mString+"down";
}
}
3、使用最原始的JS代码生成XMLHttpRequest
<script type="text/javascript">
var xmlHttp = null;
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
try {// Firefox, Opera 8.0+, Safari, IE7
xmlHttp = new XMLHttpRequest();
}
catch (e) {// Old IE
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support XMLHTTP!");
return;
}
}
var url = "/ajax/processing?q=" + str;
url = url + "&sid=" + Math.random();//get方法添加一个随机数,防止获取到缓存数据
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{ document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
解释:由于IE5 和 IE6 使用 ActiveXObject,所以考虑兼容性,如果浏览器不能实例化XMLHttpRequest,就实例化ActiveXObject,两者都不行则返回,Ajax使用异步才能体现其价值所在,所以这里不示范同步的方法。
在同步和异步中,公用的方法有:
open(method,url,async) : 规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
send(string) : 将请求发送到服务器。
- string:仅用于 POST 请求
open方法实际上是往对象中放参数,真正跟服务器沟通的步骤应该是open方法执行的时候。
而当async为true时,那么这时,使用的异步方法,此时要操作数据只能依靠一个回调function:onreadystatechange
onreadystatechange : 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
XMLHttpRequest属性:
readyState : 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status :
200: “OK”
404: 未找到页面
注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。
总结过程是如下:
1、生成XMLHttpRequest
2、设置onreadystatechange方法
3、open设置参数
4、send正式连接
参考:AJAX XHRx章节
4、$.ajax、$.get、$.post、.load的区别和用法
4.1、区别
1、jquery对Ajax进行了封装,其中$.ajax方法是最基本的方法其中也拥有众多的属性可以设置,灵活度最高,但也是原始的,$.get、$.post、.load三个方法比$.ajax更高一级,你可以这想成上下级关系。
2、$.get、$.post、.load三个方法中,我们也可以分一分,根据操作的对象是否是选择器,.load方法是需要一个选择器元素的,否则不能执行.load方法,$.get、$.post则是直接$美元符号执行方法。
3、$.get、$.post再次细分,就是http中的get方法和post方法的区别了,get方法数据放在url中,有长度限制,并且允许缓存,而post方法数据放在请求体中,没有长度限制,没有缓存机制。
所以思路是这样子,接下来看看代码吧,说得再多,不如体验一把。
4.2、$.ajax方法
jQuery 发送的所有 Ajax 请求,内部都会通过调用 $.ajax() 函数来实现。通常没有必要直接调用这个函数,可以使用几个已经封装的简便方法,如$.get()和.load()。如果你需要用到那些不常见的选项,那么,$.ajax()使用起来更灵活。
实例:
<script type="text/javascript">
function mAjax(str) {
$.ajax({
url: "/ajax/load",
data:{mString:str},
success:function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("data: "+responseTxt+"\nnStatus:"+statusTxt);
}
});
}
</script>
其中success属性的是一个function,原型是:
Function( Anything data, String textStatus, jqXHR jqXHR )
这个方法也是成功时的回调,逻辑在这个function中执行,第一个形参数是返回的数据,第二个是状态,这里是success,第三个是XMLHttpRequest对象(不同版本jquery会有不同的类名,所以你知道是XMLHttpRequest对象就行了)
4.3、.load方法
描述:从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。
方法原型:
.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
- url是请求的地址(可以值一个html页面
- data可选项,向服务器发送一些数据
- complete类型方法,跟上面的回调参数一样不做解释,这个回调方法是在load方法执行完,并且html完全加载完后执行该方法。
这个方法是从服务器获取数据最简单的方法。除了不是全局函数,这个方法和$.get(url, data, success) 基本相同,它有一个隐含的回调函数。 当他检查到一个成功的请求(i.e. 当 textStatus是 “success” 或者 “notmodified”)时,.load() 方法将返回的HTML 内容数据设置到相匹配的节点中。
如果选择器没有匹配的元素——在这种情况下,如果document不包含id = “result” 的元素- 这个Ajax请求将不会被发送出去。
实例:
<script type="text/javascript">
function mLoad(str) {
$("#loadz").load("/ajax/load",{mString:str},function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("data: "+responseTxt+"\nnStatus:"+statusTxt);
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+statusTxt);
});
}
</script>
在.load方法中,可以加载一个html,如果没有添加了选择器表达式,html中含有js脚本会被加载运行,添加了选择器表达式,会只加载那个选择器的内容。
4.4、$.get方法
描述:使用一个HTTP GET请求从服务器加载数据。
方法原型:
jQuery.get( url [, data ] [, success ] [, dataType ] )
- url是请求的地址(可以值一个html页面
- data可选项,向服务器发送一些数据
- success属性是一个可选项方法,跟上面的回调参数一样不做解释,这个回调方法是在成功返回数据的时候调用。
- dataType可选项,从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, text,html)。注意:有dataType必须要有success回调方法
$.get方法,等价于:
$.ajax({
2. url: url,
3. data: data,
4. success: success,
5. dataType:data类型
6.});
实例:
<script type="text/javascript">
function mGet(str){
$.get("/ajax/load?mString="+str , function (data,status){
alert("Data: " + data + "\nnStatus: " + status);
});
}
</script>
4.5、$.post方法
描述:使用一个HTTP POST 请求从服务器加载数据。
方法原型:
jQuery.post( url [, data ] [, success ] [, dataType ] )
方法参数与get相同不做解释。
注意:用 POST 获取的页面是从来不会被缓存, 所以这些请求中的 cache 和 ifModified 选项在 jQuery.ajaxSetup() 是无效的。
实例:
<script type="text/javascript">
function mPost(str){
$.post("/ajax/load" ,{mString:str}, function (data,status){
alert("Data: " + data + "\nnStatus: " + status);
});
}
</script>
5、后记
图描述:
其实上面 $.ajax、 $.get、 $.post、.load四个方法都是完成同样的功能,完全没问题,怎么运用就看业务的实际需要了。