使用ajax发起异步请求(javascript)
发起ajax请求分为以下四个步骤:
1. 创建XMLHttpRequest对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
创建XMLHttpRequest 对象的语法:
var xmlHttp = new XMLHttpRequest();
老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX对象:
variable=newActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括IE5 和 IE6,请检查浏览器是否支持XMLHttpRequest对象。
如果支持,则创建 XMLHttpRequest对象。如果不支持,则创建 ActiveXObject
//定义一个全局变量
var xmlHttp = null;
//创建XMLHttpRequest对象
function getXmlHttp(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
}
2.打开连接
打开连接通过调用XMLHttpRequest对象的open方法,该方法需要传入三个参数
Method:请求的方法 get/post;
url:访问后台服务器的url地址
issync:是否是异步的。一般都设置为true
//打开连接
var url = "http://localhost:80/项目名称/servlet";
xmlHttp.open("GET", url, true);
注意:如果请求方法是post,那么在打开连接之后必须设置一个请求头:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3.发送请求
发送请求通过调用xmlHttp.send方法。如果请求方式是post,可以在send方法中传递请求的参数,如:xmlHttp.send(“username=itjot&password=password”)也可以直接加到url后面;
//发送请求
xmlHttp.send(“username=itjot&password=password”);
4.接受响应
如果async=true必须规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML= xmlhttp.responseText;
}
}
Ajax请求
ajax([options])
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。
最简单的情况下,$.ajax()可以不带任何参数直接使用。
注意:所有的选项都可以通过$.ajaxSetup()函数来全局设置。回调函数:
beforeSend----------在发送之前调用,并传入一个XMLHttpRequest作为参数。
error---------在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以 及一个异常对象(如果有话)
dataFilter------在请求成功之后调用。传入返回的数据以及”dataType”参数的值,并且必 须返回新的数据(可能是处理过得)传递给success回调函数。
success------当请求之后调用,传入返回的数据以及包含成功代码的字符串。
complete------当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest 对象,以及成功或错误代码的字符串
数据类型:
数据类型可以是xml、html、json、jsonp、script、text
如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,他首先尝试使用JSON.parse()。如果浏览器不支持,则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。
发送数据到服务器
默认情况下,Ajax请求使用GET方法。如果要使用POST方法,可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
data选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如{key1: 'value1', key2: 'value2'} 。如果使用了后者的形式,则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时,这种处理可能并不合适。并且在这种情况下,我们也应当改变contentType选项的值,用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。
实例一:加载并执行一个js文件
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
实例二:
保存数据到服务器,成功显示信息
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
实例三:装入一个HTML网页最新版本
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
实例四:同步加载数据,发送请求时封锁住浏览器。需要锁定用户交互操作时使用同步方式
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
实例五:发送XML数据至服务器,设置processData选项为false,防止自动转换数据格式。
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
load(url,[data],[callback])
实例一:加载文章侧边栏导航部分至一个无序列表。
HTML代码:
<b>jQueryLinks:</b>
<ulid="links"></ul>
jQuery代码:
$("#links").load("/Main_Page#p-Getting-Started li");
实例二:加载feeds,html文件内容
$("#feeds").load("feeds.html");
实例三:同上,但是以 POST 形式发送附加参数并在成功时显示信息。
$("#feeds").load("feeds.php",{limit: 25}, function(){
alert("The last 25 entries in the feedhave been loaded");
});
get(url,[data],[callback],[type])
type(可选):返回内容格式,xml、html、script、json、text、_default。
实例一:请求test.php网页,忽略返回值
$get("test.php");
实例二:请求test.php网页,传送2个参数,忽略返回值。
$get("test.php",{name:"john",time:"2pm"});
实例三:显示test.php返回值(HTML或XML,取决于返回值)
$get("test.php",function(data){
alert("Data Loaded:"+data);
})
实例四:显示test.cgi返回值,添加一组请求参数。
$get("test.cgi",{name:"john",time:"2pm"},
function(data){
alert("Data Loaded:"+data);
})
getJSON(url,[data],[callback])
实例一:从FlickrJSONP API载入4张最新的关于猫的图片
HTML代码:
<div id="images"></div>
JQuery代码:
$getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src",item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
实例二:从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
实例三:从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字 段数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});