ajax

最新推荐文章于 2022-11-24 09:04:53 发布

dxj124

最新推荐文章于 2022-11-24 09:04:53 发布

阅读量183

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/dxj124/article/details/84025252

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jquery中ajax的一些用法：

1.$.ajax

 $.ajax({
            type: "get",
            url: goUrl,
            xhrFields: {//为了传登录态
                withCredentials: true
            },
            success: function(res) {
              console.log(res)
            },
           fail:function(res){//失败
               console.log(res)
           },
           error: function(res) {//调用出错，压根调不了接口时
               console.log(res)  
            }
            
        })

二、$.ajax()参数解释

url: 发送请求的地址。

type: 请求方式（post或get）默认为get。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。

async：默认设置为true，所有请求均为异步请求。同步请求，设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。-----这个是同步操作最重要的设置因素

cache：默认为true,如果浏览器有缓存就会获取浏览器的缓存数据，设置false怎么不会获取缓存数据

data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格

式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格

式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同

值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime

信息返回responseXML或responseText，并作为回调函数参数传递。

可用的类型如下：

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

json：返回JSON数据。

jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个 “?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

(1)由服务器返回，并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等this;

//调用本次ajax请求时传递的options参数

error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

ajax事件函数如下：

       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的 dataType参数。函数返回的值将由jQuery进一步处理。

            function(data, type){
                //返回处理后的数据
                return data;
            }

global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局 ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如 {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。

processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

2.$.getScript 返回的是一个jsonp，解决跨域

 $.getScript(goUrl, function() {
            if (jsonp.status == 0) {
               
            }
        })

可以用ajax实现

    $.ajax({
        type: "get",
        url: goUrl,
        dataType: "jsonp",//指定服务器返回的数据类型
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback: "successCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
        xhrFields: { //为了传登录态
            withCredentials: true
        },
        success: function(res) {
            console.log(J_PointInfo)
            if (res.iRet == 0) { //助威成功

            }
        },
        fail: function(res) {
            console.log(res)
            console.log(J_PointInfo)
        },
        error: function(res) {
            console.log(res)
            console.log(J_PointInfo)
        }

    })


用ajax请求一个jsonp的数据（将dataType设置为script）
  $.ajax({
          url: goUrl,
          dataType: "script",
          success: function() {
                console.log(GameTypeList)
          }
        })

3. $.getJSON 返回的是一个json

$.ajaxSettings.async = true;
$.getJSON(goUrl, function(res) {
          console.log(res)

  })



注意：在执行之前加$.ajaxSettings.async = false;    (同步执行)        执行你的代码之后及时恢复为$.ajaxSettings.async = true； （异步执行）不然影响别的地方的需要异步执行的代码。

4.错误回调方法

1、使用try...catch实现

2、换$.ajax

3、JQuery 1.5+可以这样使用：


$.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

5.`jQuery.ajaxSetup()`函数用于设置AJAX的全局默认设置。

该函数用于更改jQuery中AJAX请求的默认设置选项。之后执行的所有AJAX请求，如果对应的选项参数没有设置，将使用更改后的默认设置。

语法：

jQuery.ajaxSetup( settings )

//设置AJAX的全局默认选项
$.ajaxSetup( {
    url: "/index.html" , // 默认URL
    aysnc: false , // 默认同步加载
    type: "POST" , // 默认使用POST方式
    headers: { // 默认添加请求头
        "Author": "CodePlayer" ,
        "Powered-By": "CodePlayer"
    } ,
    error: function(jqXHR, textStatus, errorMsg){ // 出错时默认的处理函数
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等
 
        // 提示形如：发送AJAX请求到"/index.html"时出错[404]：Not Found
        alert( '发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']：' + errorMsg );        
    }
} );
 
 
// 未设置任何参数，但url、async、type、headers、error等参数的默认值均已被$.ajaxSetup()更改(如上)
$.ajax( );
 
 
// 设置了url、type、success、error，就使用自己设置的参数值
// 但async、headers等参数的默认值已被$.ajaxSetup()更改
$.ajax( {
    url: "myurl.php?action=list" ,
    type: "GET" ,
    success: function( data, textStatus, jqXHR ){
        alert("返回数据：" + data);
    } ,
    error: function(jqXHR, textStatus, errorMsg){
        alert("自己的error!");        
    }
});
 
// 上述$.ajaxSetup()的默认设置对$.get()、$.post()、load()、$.getJSON()、$.getScript()等AJAX函数也生效
// 因为这些函数也是在内部调用$.ajax()函数来实现的，只不过它们在内部都设置了一些参数
 
 
// $.get()在内部调用$.ajax()时已设置type为"GET"，因此仍然使用GET方式。
// 但url、async、headers、error等参数的默认值已被$.ajaxSetup()更改
$.get( );
 
 
// $.post()在内部调用$.ajax()时已设置type为"POST"，因此仍然使用POST方式。
// url也被设置为"user/action.php?method=addUser"
// 但async、headers、error等参数的默认值已被$.ajaxSetup()更改
$.post( "user/action.php?method=addUser" );

JQuery的 Ajax 跨域请求的解决方案

客户端JQuery.ajax的调用代码示例：

$.ajax({
	type : "get",
	async:false,
	url : "http://www.xxx.com/ajax.do",
	dataType : "jsonp",
	jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
	jsonpCallback:"success_jsonpCallback",//callback的function名称
	success : function(json){
		alert(json);
		alert(json[0].name);
	},
	error:function(){
		alert('fail');
	}
});

服务端返回数据的示例代码：


public void ProcessRequest (HttpContext context) {
	context.Response.ContentType = "text/plain";
	String callbackFunName = context.Request["callbackparam"];
	context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}

loadScripts封装使用：

用于处理pc端和移动端加载不同的文件

  //加载js
	function loadScripts(t, e) {
		function a() {
			var o = document.createElement("script");
			o.type = "text/javascript";
			var c = -1 == t[n].indexOf("?") ? t[n] + "?d=" + Math.random() : t[n] + "&d=" + Math.random();
			o.src = c, document.body.appendChild(o), n++, o.readyState ? o.onreadystatechange = function() {
				("loaded" == o.readyState || "complete" == o.readyState) && (o.onreadystatechange = null, d++, d < t.length - 1 ? a() : e && e())
			} : o.onload = function() {
				d++, d < t.length ? a() : e && e()
			}
		}
		e = e || function() {};
		var n = 0,
				d = 0;
		a()
	}
	



if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {//移动端脚本逻辑
		loadScripts([
			"a.js", 
			"b.js", 
			"c.js",
			"d.js",
		], function() {});
		})
	} else {//PC端脚本逻辑
		loadScripts([
			"aa.js",
			"bb.js",
		], function() {});
	}

dxj124

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

jquery中ajax的一些用法：1.$.ajax $.ajax({ type: "get", url: goUrl, xhrFields: {//为了传登录态 withCredentials: true }, success: fun...
复制链接

扫一扫