xiaolizi007
11/25/2016 - 5:45 AM

ajax的例子

ajax的例子 #js

//jsonp传输方式
$.ajax({
    type: "get",
    async: false,
    url: "ajax.ashx",
    dataType: "jsonp",
    jsonp: "callbackparam",  //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) 
    jsonpCallback: "success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 
    success: function (json) { alert(json); alert(json[0].name); },
    error: function () { alert('fail'); }
});
//dataType 
//预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,
//比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,
//而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
//"xml": 返回 XML 文档,可用 jQuery 处理。
//"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
//"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下) ,所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
//"json": 返回 JSON 数据 。
//"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
//"text": 返回纯文本字符串
//jsonp 
//在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp: 'onJsonPLoad' } 会导致将"onJsonPLoad=?"传给服务器。
//jsonpCallback 
//为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。
//ajax jsonp与普通的ajax请求的主要区别在于——请求响应结果的处理。如上面代码所示的响应结果为:
//success_jsonpCallback([{ name: "John" }]); ————其实就是,调用jsonp回调函数success_jsonpCallback, 并将要响应的字符串或json传入此方法(作为参数值) ,其底层的实现,大概的猜想应该是:
//function success_jsonpCallback(data) {
//    success(data);
//}



//普通的ajax演示
$.ajax({
    //提交数据的类型 POST GET 
    type: "POST",
    //提交的网址 
    url: "testLogin.aspx",
    //提交的数据 
    data: { Name: "sanmao", Password: "sanmaoword" },
    //返回数据的格式 
    datatype: "html",//"xml", "html", "script", "json", "jsonp", "text". 
    //在请求之前调用的函数 
    beforeSend: function () { $("#msg").html("logining"); },
    //成功返回之后调用的函数 
    success: function (data) { $("#msg").html(decodeURI(data)); },
    //调用执行后调用的函数 
    complete: function (XMLHttpRequest, textStatus) { alert(XMLHttpRequest.responseText); alert(textStatus); },
    //调用出错执行的函数 
    error: function () { }
});

//原生的javascript的ajax方法
var xmlhttp; // 声明一个对象 
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp = new XMLHttpRequest(); // 创建一个异步对象 
} else {
    // code for IE6, IE5 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () // 设置onreadystatechange事件 
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    // 关于readystate的请求状态码,0表示异步对象创建,1=设置参数,2=发送请求报文,3=接受响应报文,4=响应报文接受完毕 
    { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; }
}
xmlhttp.open("GET", "test1.txt", true); xmlhttp.send();

//-在IE 5和IE 6中,必须使用特定于IE的ActiveXObject()构造函数
new ActiveXObject("Msxml2.XMLHTTP") ;
new ActiveXObject("Microsoft.XMLHTTP");