简单介绍ajax
AJAX:”Asynchronous JavaScript and XML”
中文意思:异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
(目前来说ajax还是一门单线程语言)不能异步执行js代码,XMLHttpRequest 是ajax的核心对象,
不是指一种单一的技术,而是有机地利用了一系列相关的技术:
简单理解为:JavaScript + XMLHttpRequest + CSS +服务器端 的集合.
l使用XMLHttpRequest对象
按照下面模式,可以同步地XMLHttpRequest对象:
1.创建对象; - new XMLHttpRequest
2.创建请求; - open (初始化,xhr对象。告诉他要去做的事情)
3.发送请求; - send (发送请求(告诉浏览器开启一个异步请求。),去吧)
l为XMLHttpRequest对象设置请求参数
1.GET方式
1.1设置参数
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET方式请求可以设置浏览器不使用缓存
xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送: xhr.send(null);//GET方式
2.POST方式:
1.1设置参数:xhr.open("POST", "GetAreasByAjax.aspx", true);
1.2添加请求头:xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
1.3发送:xhr.send("isAjax=1&na=123");//POST方式
复制代码
function createXmlHttp() {//创建xhr对象
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}
复制代码
1、JQUERY.AJAX(URL,[SETTINGS])
url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。
2、JQUERY.GET(URL,[data],[callback],[type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
示例:
$.get("test.ashx", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});
3、JQUERY.GETJSON(URL,[data],[callback])
通过 HTTP GET 请求载入 JSON 数据。
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
示例:
$.getJSON("test.ashx", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
4、JQUERY.POST(URL,[data],[callback],[type])
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用.ajax。
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
示例:
$.post("test.ashx", { "func": "getNameAndTime" },function(data){
alert(data.name);
}, "json");