黑马程序员技术交流社区

标题: 小笔记 [打印本页]

---

作者: 荔鹿小姐    时间: 2019-6-6 08:52
标题: 小笔记
【发送请求】
同源：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">；

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2