AJAX浅谈

Youngs 发布于2019-08-22 14:00 / 745人阅读

摘要：用规范重新封装该函数什么是同源策略协议域名端口一摸一样跨域就是告诉后端哪个域名可以访问，后端中写入你请求的网站所在一般现在跨域用跨域比较多

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跨域比较多

GPU云服务器云服务器设计浅谈浅谈javascript 浅谈sdwan解决方案浅谈正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92747.html

浅谈contentType = false

摘要：起初，协议中没有上传文件方面的功能，直到为协议添加了这个功能。而我们在中设置为是为了避免对其操作，从而失去分界符，而使服务器不能正常解析文件。在刚接触 JQuery 中的 ajax 时，对其 contentType 并没有很在意，只是知晓它是代表发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。默认值为contentType = applicatio...

renweihub 2019-08-21 14:38 评论0 收藏0
浅谈JSONP

摘要：就这样被发明了，利用的属性不受同源策略的控制，作弊般地巧妙地逃过了浏览器的这一限制。然后，声明这个回调函数。这是我在13年初写的文章，当时懵懵懂懂写下了自己对JSONP的理解。文章原文博客欢迎订阅提到JSONP，我当时在网上找了无数帖子也没有看懂它。那些文章大同小异，都是讲到JSONP原理以后就戛然而止，把我们这些初学者搞得云里雾里。所以，写下这篇文章，希望对大家有帮助...

binta 2019-08-21 10:41 评论0 收藏0
浅谈 JavaScript 运行机制

摘要：以多线程的形式，允许单个任务分成不同的部分进行运行。提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源。主线程会不断的重复上诉过程。众所周知，js是单线程的，说到线程，我们首先来仔细辨析一下线程和进程的知识。一、进程与线程阮一峰老师的一篇文章写的很好 cpu会给当前进程分配资源，进程是资源分配的最小单位，进程的资源会分配给线程使用，线程是C...

URLOS 2019-08-22 18:13 评论0 收藏0
浅谈 Web 中前后端模板引擎的使用

摘要：前端模板的出现使得前后端分离成为可能。总结本文简单介绍了模板引擎在前后端的使用，下文我们回到，重点分析下的使用方式以及源码原理。楼主对于模板引擎的认识比较浅显，有不正之处希望指出感谢前言这篇文章本来不打算写的，实话说楼主对前端模板的认识还处在非常初级的阶段，但是为了整个源码解读系列的完整性，在深入 Underscore _.template 方法源码后，觉得还是有必要记下此文，...

chenjiang3 2019-08-20 11:56 评论0 收藏0
浅谈Javascript中Promise对象的实现

摘要：我们可以进行适当的改进，把回调函数写到外面即使是改写成这样，代码还是不够直观，但是如果有了对象，代码就可以写得非常清晰，一目了然，请看这样函数就不用写在的回调中了目前的标准中还未支持对象，那么我们就自己动手，丰衣足食吧。本文同步自我得博客：http://www.joeray61.com 很多做前端的朋友应该都听说过Promise（或者Deferred）对象，今天我就讲一下我对Prom...

caiyongji 2019-08-21 10:18 评论0 收藏0