jq.ajax请求数据

TEST CASE

固定数据模式动态数据模式
GET POSTGET POST
Yes NoYesNoYes NoYesNo
网络对同域网络请求「不跨域」jsonp、json、html、script、text、xmljsonp、json、html、script、text、xml

跨域方法②：
服务器代理请求(Yes)

jsonp、json、html、script、text、xmljsonp、json、html、script、text、xml
本地对本地请求「不跨域]jsonp、json、html、script、text、xmljsonp、json、html、script、text、xml
在HBuilder里面，本地对本地请求「不跨域」jsonp、json、html、script、text、xmljsonp、json、html、script、text、xml
本地对网络请求「跨域」script、jsonphtml、json、text、xml

跨域方法①②：
头部设置header并且服务器代理请求(Yes)

script、jsonphtml、json、text、xml

跨域方法①②：
头部设置header并且服务器代理请求(Yes)

script、jsonphtml、json、text、xml

跨域方法①：
头部设置header(Yes)

script、jsonphtml、json、text、xml

跨域方法①：
头部设置header(Yes)

网络对跨域网络请求「跨域」script、jsonphtml、json、text、xml

跨域方法①②：
头部设置header并且服务器代理请求(Yes)

script、jsonphtml、json、text、xml

跨域方法①②：
头部设置header并且服务器代理请求(Yes)

script、jsonphtml、json、text、xml

跨域方法①：
头部设置header(Yes)

script、jsonphtml、json、text、xml

跨域方法①：
头部设置header(Yes)

在HBuilder里面，本地对网络请求「跨域」script、json、html、script、text、xmlscript、jsonphtml、json、text、xml

跨域方法②：
服务器代理请求(Yes)

jsonp、json、html、script、text、xmljsonp、json、html、script、text、xml

注意事项：
├──当服务器代理请求其它页面时候，其它页面应设置为ANSI格式，如果不能，那就设置php页面必须为ANSI格式，才会生效，不然会出现问题
└──注意php文件里面的代码是否有不必要的空格，有可能会引起错误

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$.ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
	    //ajax简单模式-----------------------
        htmlobj=$.ajax({                //把ajax请求的内容赋值给变量
        	url:"1.php?ceo=wanximi&url=https://www.zzxxo.com",                //请求的 URL---------?ceo=wanximi&url=https://www.zzxxo.com------表示发送到服务器的数据
            //服务器php可以通过$_GET['ceo']获取url后面的参数的值
            async:false,               //是否异步处理,默认 true(使用简单模式时，必须设置为同步处理才生效)
        });
        alert(htmlobj.responseText)     //使用responseText获取ajax
        
        
        
        
         //ajax复杂模式-----------------------
		$.ajax({
			url:"1.php?ceo=wanximi&url=https://www.zzxxo.com",                               //请求的 URL---------?ceo=wanximi&url=https://www.zzxxo.com------表示发送到服务器的数据
	 		/*
	 		├── 服务器php可以通过$_GET['ceo']获取url后面的参数的值
	 		└── 特别提示：ajax对请求url文件的类型不敏感，只要文件里面的文本内容符合相应类型的格式，即可。（例如：可以在txt文件里面写jsonp、json、script、html、xml）
	 		*/
			beforeSend:function(){alert("开始请求");return true;},  //发送请求前运行的函数
			//返回return true:继续执行ajax(可选)
			//返回return false:停止执行ajax(可选)
			dataFilter:function(a,type){alert(a+"这是预处理函数"); return a;},    //对ajax返回的数据进行预先处理函数
			//a参数：ajax返回的原始数据
            //type参数：dataType的值（ajax请求时返回的数据类型）
		 	success:function(data,b,xhr){alert(a)},         //当请求成功时运行的函数
			//data参数:调用成功返回的内容
			//b参数:返回成功的代码(success)
			//xhr参数：包含XMLhttpRequest相关参数(xhr.status:成功数字代码'200'、xhr.statusText:成功文本信息'ok')
			/*ajax返回值的使用方法
			//jsonp
            alert(data.name);
		 	--------------------------------------------------------------------
			//json
            document.write(data.name[0]+data.name[1]+data.name[2])
		 	--------------------------------------------------------------------
			//script
            document.write("直接调用变量值:"+zxlmweb+"<br>"+"调用对象:"+zzxxo.url)
		 	--------------------------------------------------------------------
			//text
		 	$("div").text(data)
		 	--------------------------------------------------------------------
			//html
            $("div").html(data)
		 	--------------------------------------------------------------------
			//xml
            alert(data.getElementsByTagName("name")[0].childNodes[0].nodeValue)
		 	--------------------------------------------------------------------  
	 		*/
			error:function(xhr,b,c){alert(b)},           //请求失败时运行的函数
	 		/*
	 		├── xhr参数：包含XMLhttpRequest相关参数(xhr.status:失败数字代码'404'、xhr.statusText:失败文本信息'Not Found')
	 		├── b参数：返回失败的代码(error)
	 		└── c参数：返回失败文本信息'Not Found'
	 		*/
			complete:function(xhr,b){alert(b)},                 //请求结束之后,运行的函数(请求失败或者成功都调用，在succes和error之后执行)
	 		/*
	 		├── xhr参数:包含XMLhttpRequest相关参数(xhr.status:成功or失败数字代码'200'或者'404'、a.statusText:成功or失败文本信息'OK'or'Not Found')
	 		└── b参数:返回成功or失败的代码(error 或者success)
	 		*/
		//	jsonp: "callback",                          //jsonp回调函数名的参数名(一般默认为:callback)。  
	 		/*
	 		├── 请求jsonp类型时候可选，[获取jsonpCallback:"zzxxo"时，必选]，其它类型不使用
	 		└── 远程php服务器可以使用$_GET['callback']可以获取客户端jsonpCallback的值
	 		*/
		//	jsonpCallback:"zzxxo",                    //为jsonp指定一个回调函数名，回调函数名必须与服务器返回的回调函数名相同（请求jsonp类型时候必选，其它类型不使用）
	 		type:'get',                               //请求的方式(post、get)      (ps:在向服务器发送数据时，要注意服务器的接受类型)
	 		/*
	 		├── 在请求jsonp模式时，"post"和"get都可选择，但是要让服务器通过【jsonp: "callback"--获取-->jsonpCallback:"zzxxo"】和获取【请求url后面的？参数名字=参数值】，就必须使用 “get”方式
	 		└── 更多设置参考上面的表格↑↑↑
	 		*/
			async:false,                               //是否异步处理,默认 true
			cache:true,                                //是否缓存请求页面,默认true
			timeout:1000,                              //设置本地的请求超时时间（以毫秒计）
			dataType:"html",                                    //返回的数据类型(xml、html、script、json、text、jsonp)
			contentType:"application/x-www-form-urlencoded",    //发送信息至服务器时内容编码类型
			//data:"name=wangzixuna&url=http://www.zxlmweb.com"   //发送到服务器的数据(①方法)
			data:{name:'wanximi',url:'http://www.zxlmweb.com'}   //发送到服务器的数据(②方法)
		});
        
});
</script>
</head>
<body>
</body>
</html>
<!--
【服务器动态生成数据模式】////////////////////////////////////////////////////////////////////////////////////////////////////////////
==========服务器接受ajax发送的数据，并且生成数据返回给ajax=====================================
<?php
$name=$_POST['name'];       //使用$_GET获取name,      $_GET[]==>type:'get',         $_POST[]==>type:'post'
$url=$_POST['url'];           //使用$_GET获取url
echo  $name.$url;             //输出name
?>

==========服务器通过回调函数名的参数名【jsonp: "callback"】，获取jsonp回调函数名，并且生成jsonp格式返回=======
<?php
$callback=$_GET['callback'];
$name="wanximi";
echo $callback.'({"name":"'.$name.'"})';
?>

//输出的格式样式
zzxxo({
"name":"wanximi",
"url":"https://www.zzxxo.com"
})

【固定数据模式】/////////////////////////////////////////////////////////////////////////////////////////////////////////////
特别提示：ajax对请求url文件的类型不敏感，只要文件里面的文本内容符合相应类型的格式，即可。（例如：可以在txt文件里面写jsonp、json、script、html、xml、text）

-----ajax.txt--【jsonp】--------------------
zzxxo({"name":"wanximi","url":"http://www.zxlmweb.com"})

-----ajax.txt--【json】--------------------
{
"name":["wang","zi","xuan"],
"url":["http://www.zxlmweb.com","https://www.zzxxo.com"]
}

-----ajax.txt--【script】--------------------
var  zzxxo={
    name:"wanximi",
    url:"https://www.zzxxo.com"
}
var  zxlmweb="这是直接的js值，可以直接调用";

-----ajax.txt--【text】--------------------
这是一段文本文字

-----ajax.txt--【html】--------------------
<div style="color:#f00">wangzixuna</div>
<div style="color:#f00">http://www.zxlmweb.com</div>

-----ajax.txt--【xml】--------------------
<?xml version="1.0"  encoding="UTF-8"?>
<zzxxo>
	<zxlmweb>
		<name>wanximi</name>
	</zxlmweb>
	<zxlmweb>
		<url>http://www.zxlmweb.com</url>
	</zxlmweb>
</zzxxo>

/*结构图样式
            ├── backbone.js                   # ... library
            │   ├── 1.1.0                     # ... version
            │   │   └── backbone.js           # ... fileanme
            │   └── 1.1.1
            │       └── backbone.js  
            └── package.json                  # ... package.json
            */
-->