摘要:用规范重新封装该函数什么是同源策略协议域名端口一摸一样跨域就是告诉后端哪个域名可以访问,后端中写入你请求的网站所在一般现在跨域用跨域比较多
ajax的含义
ajax是异步JavaScript和xml(asynchronous JavaScript and xml):
利用XMLHttpRequest发请求
服务器返回XML格式的字符串,但后面一般使用JSON
JS解析XML,并更新局部页面
代码:
let httpRequest = new XMLHttpRequest() //声明一个xmlhttprequest对象 httpRequest.open("GET", "/xxx") // 配置request httpRequest.setRequestHeader("Content-Type", "x-www-form-urlencoded") // 设置请求头第二部分 httpRequest.onreadystatechange = ( => { //随便放在哪个位置,监听状态的变化 if(httpRequest.readyState === 4) { console.log("请求响应完毕") console.log(httpRequest.status) console.log(httpRequest.statusText) if(httpRequest.status >= 200 && httpRequest.status < 300>) { console.log("请求成功") console.log(httpRequest.getAllResponseHeaders()) console.log(httpRequest.responseText) let string = httpRequest.responseText //取得响应体 let object = window.JSON.parse(string) //把符合JSON语法的字符串转换为JS对象 //JSON.parse是浏览器提供的 } else if(httpRequest.status >= 400) { console.log("说明请求失败") } } }) httpRequest.send("设置request第四部分") //GET请求不会设置第四部分用AJAX设置请求头
第一部分GET /XXX HTTP/1.1 : httpRequest.open("get", "/XXX")
第一部分HOST: jack.com:8002 : httpRequest.open("get", "http://jack.com:8002/")
第二部分Content-Type : application/x-www-url-encoded : httpRequest.setRequestHeader("Content-Type", "application/x-www-url-encoded")
第四部分a = 1&b = 2 : httpRequest.send("a = 1&b = 2")
用AJAX获取响应头第一部分HTTP/1.1 200 OK : httpReuqest.status & httpRequest.statusText
第二部分Content-Type : application/x-www-url-encoded : httpRequest.getResponseHeader("Content-Type")
所有的第二部分 : httpRequest.getAllResponseHeaders()
第四部分 : httpRequest.responseText
现在一般不使用XML,而使用JSON,JSON是道格拉斯写的一本轻量型的文本语言
自己封装jQuery的ajax函数//传入一个对象,该对象具有url,method等方法和回调函数。 window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}) { let request = new XMLHttpRequest() request.open(method, url) for(let key in headers) { let value = headers[key] request.setRequestHeader(key, value) } request.onreadystatechange = () => { if(request.readystate === 4) { if(request.status >= 200 && request.status < 300) { successFn.call(undefined, request.responseText) } else if(request.status >= 400) { failFn.call(undefined, request) } } } request.send(body) }用promise规范重新封装该函数:
window.jQuery.ajax = function({url, method, body, headers}) { return new Promise(function(resolve, reject) { let request = new XMLHttpRequest() request.open(method, url) for(let key in headers) { let value = headers[key] request.setRequestHeader(key, value) } request.onreadystatechange = () => { if(request.readystate === 4) { if(request.status >= 200 && request.status < 300) { resolve.call(undefined, request.responseText) } else if(request.status >= 400) { reject.call(undefined, request) } } } request.send(body) }) } window.jQuery.ajax({ url: "/baidu.com", method: "GET", headers: { "Content-Type" : "application/x-www-form-urlencoded" } }).then( (responseText) => { console.log(responseText) }, (request) => { console.log(request) } )什么是同源策略?
协议+域名+端口一摸一样
cors跨域 (Cross-Origin Resource Sharing)就是告诉后端哪个域名可以访问,后端node中写入
response.setHeader("Access-Control-Allow-Origin", "你请求的网站所在")
一般现在跨域用cors跨域比较多
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92747.html
摘要:起初,协议中没有上传文件方面的功能,直到为协议添加了这个功能。而我们在中设置为是为了避免对其操作,从而失去分界符,而使服务器不能正常解析文件。 在刚接触 JQuery 中的 ajax 时,对其 contentType 并没有很在意,只是知晓它是代表发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。 默认值为contentType = applicatio...
摘要:以多线程的形式,允许单个任务分成不同的部分进行运行。提供协调机制,一方面防止进程之间和线程之间产生冲突,另一方面允许进程之间和线程之间共享资源。主线程会不断的重复上诉过程。 众所周知,js是单线程的,说到线程,我们首先来仔细辨析一下线程和进程的知识。 一、进程与线程 阮一峰老师的一篇文章写的很好 cpu会给当前进程分配资源,进程是资源分配的最小单位,进程的资源会分配给线程使用,线程是C...
摘要:前端模板的出现使得前后端分离成为可能。总结本文简单介绍了模板引擎在前后端的使用,下文我们回到,重点分析下的使用方式以及源码原理。楼主对于模板引擎的认识比较浅显,有不正之处希望指出感谢 前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此文,...
摘要:我们可以进行适当的改进,把回调函数写到外面即使是改写成这样,代码还是不够直观,但是如果有了对象,代码就可以写得非常清晰,一目了然,请看这样函数就不用写在的回调中了目前的标准中还未支持对象,那么我们就自己动手,丰衣足食吧。 本文同步自我得博客:http://www.joeray61.com 很多做前端的朋友应该都听说过Promise(或者Deferred)对象,今天我就讲一下我对Prom...
阅读 2435·2021-09-09 09:33
阅读 2810·2019-08-30 15:56
阅读 3089·2019-08-30 14:21
阅读 847·2019-08-30 13:01
阅读 802·2019-08-26 18:27
阅读 3554·2019-08-26 13:47
阅读 3423·2019-08-26 10:26
阅读 1537·2019-08-23 18:38