【发送请求】
同源:var xhr = new XMLHttpRequest();
1、收集表单数据使用时手动拼接;
2、通过FormData来收集:var myform = document.querySelecter("表单");
var formdata = new FormData(myform);这种方法只适用于post请求,并且不用设置请求头;
❤:事件监听:xhr.upload.onprogress=function(e){};可以打印一下e看下有些啥子属性;
可以进行追加表单中没有的表单formdata.append("键","值");
3、jQuery里面的表单序列化方法:元素.serialize();
不同源:跨域请求:script及img的src天然跨域和 jsonp
❤:jsonp原理:借用script的src属性天然的跨域来实现发送跨域请求;
function test(result){
console.log(result);
}
// 定义自己的ajax
var $ ={
ajax:function(option){
var url = option.url;
var callback = option.callback;
var dataType = option.dataType;
// 当dataType为jsonp的时候我们需要发起一个跨域请求
if(dataType == "jsonp"){
// 1.创建一个script标签
var script = document.createElement("script");
// 2.为script标签设置src属性,同时在src中传入之后需要挨靠的函数名称
script.src = url +"?callback="+callback;
// 3.将生成的script标签添加到页面结构中
document.body.appendChild(script);
} } };
// 我也希望通过$.ajax的方式发送请求,当我传入dataType:jsonp的时候,希望能够发送一个跨域请求
$.ajax({
type:'get',
url:'http://day8.com/corss.php',
callback:'test',
dataType:"jsonp"
});
❤在$.ajax添加一个 dataType:"jsonp"用于区分是同源请求和跨域请求
【允许跨域请求】
服务端设定:header("Access-Control-Allow-Orign:*(或者一个url)");
客户端设定:jsonp请求:使用script的src属性天然的跨域特性;<script src="xx.php?callback=test">; |
|