php跨域发送请求原理以及同步异步问题
-
<script async type="text/javascript" src="http://lisi.com/data.php?flag=1"></script>
<script type="text/javascript">
// script标签默认请求是同步的,也就是第一个标签没有得到服务器响应内容时,后续的的标签只能等待
// 如果希望标签的请求变成异步的,可以给标签添加一个async属性
console.log(abc);
</script> - <script type="text/javascript">
/*
动态创建script标签,这种方式默认就是异步的
*/
var script = document.createElement('script');
script.src = 'http://lisi.com/data1.php?callback=abc';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
// 这个函数由谁调用?后台返回的内容(js代码-函数调用)来调用
// 回调函数(不是自己调用,而是“别人”调用)
function abc(param){
console.log(param.username);
}
</script>
//跨域对应的文件夹
<?php
$flag=$_GET['callback'];
echo $flag.'({"username":"xiaobai","age":"18"})';//返回的内容是【函数调用】
?>
-
ajax方法既支持json也支持jsonp
*/
function ajax(obj){
// 默认值
var defaults = {
type : 'get',
jsonp : 'callback',
url : '#',
data : {}
}
// 覆盖默认参数
for(var key in obj){
defaults[key] = obj[key];
}if(defaults.dataType == 'jsonp'){
// 跨域处理
_ajax4Jsonp(defaults);
}else{
// ajax处理
_ajax4Json(defaults);
}
}function _ajax4Json(obj){
// 1、创建xhr对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 处理参数
var param = '';
// 处理对象形式的参数
// 把{username:'lisi',age:12,gender:'male'}
// 转成username=lisi&age=12&gender=male
for(var key in obj.data){
// 拼接一个参数
param += key + '=' + encodeURIComponent(obj.data[key]) + '&'
}
if(param){
// 去掉最后一个字符
param = param.substring(0,param.length - 1);
}
if(obj.type == 'get'){
// 对于get请求要把参数拼接到url中
obj.url += '?' + param;
}
// 2、配置发送参数
xhr.open(obj.type,obj.url);
// 3、执行发送动作
var data = null;
if(obj.type == 'post'){
data = param;
// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
xhr.send(data);
// 4、处理响应(指定回调函数)
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
// 获取服务器响应数据
var result = xhr.responseText;
if(obj.dataType == 'json'){
// 如果要求是json格式,那么就把json字符串转成对象
result = JSON.parse(result);
}
// 调用回调函数
obj.success(result);
}
}
}function _ajax4Jsonp(obj){
// 业务参数转换
// 把{"username":"lisi","age":"12"}格式的数据转成username=lisi&age=12
var param = '';
for(var key in obj.data){
param += key + '=' + obj.data[key] + '&';
}
// if(param){
// param = param.substring(0,param.length - 1);
// }// 生成默认的回调函数的名称
var cbName = 'jQuery' + ('v1.11.1' + Math.random()).replace(/\D+/g,'') + '_' + (new Date().getTime());
if(obj.jsonpCallback){
// 如果调用方法的时候传递了回调函数的名称就把默认的覆盖掉
cbName = obj.jsonpCallback;
}// 回调函数
window[cbName] = function(data){
obj.success(data);
}
// 后台返回的内容是函数调用
// jQuery12312312312312321_43213123123(23123);// 创建script标签,然后追加到head标签中
var script = document.createElement('script');
script.src = obj.url + '?' + param + obj.jsonp + '=' + cbName;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}