AJAX原理和实现方式

missonce 发布于2019-08-26 11:54 / 715人阅读

摘要：随后也跟进抄袭了，取名，并被纳入规范全称翻译成中文异步的和技术的核心是对象简称，可以在不刷新页面页面也能取得新的数据。注意请求和响应都不包含信息。

JSONP发展

了解了JSONP技术栈后，知道了JSONP是AJAX出现之前后端交互最好的解决方案，但它依然没解决问题，用JSONP只能发送GET请求，不能发其他请求

form表单可以发GET请求，也可以发POST请求，POST请求没有请求参数，但是会刷新页面或新开页面

a标签可以发GET请求，会刷新页面或新开页面

img标签可以发GET请求，只能以图片方式展示

let image = document.createElement("img")
img.src = "/xxx"
imgae.onload = () => {}
imgae.onerror = () => {}

link可以发GET请求，但是只能以CSS、favicon的形式展示

let link = document.createElement("link")
link.src = "/xxx"
document.head.appendChild(link)
link.onload = () => {}
link.onerror = () => {}

用script可以发GET请求，但是只能以脚本的形式运行

let script = document.createElement("script")
script.src = "/xxx"
document.body.appendChild(script)
script.onload = () => {}
script.onerror = () => {}

有没有什么方式可以实现

get、post、put、delete请求都行

想以什么形式展示就以什么形式展示

微软的突破
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

AJAX

AJAX 全称 Async Javascript and XML 翻译成中文：异步的 JavaScript 和 XML

Ajax 技术的核心是 XMLHttpRequest 对象（简称：XHR），可以在不刷新页面页面也能取得新的数据。

满足下面的条件就是AJAX

使用 XMLHttpReques 发请求

服务器返回 XML 格式的字符串

JS 解析 XML，并更新局部页面

XMLHttpRequest 的用法

使用 XMLHttpRequest 三步骤：

要用 XMLHttpRequest 构造一个对象

调用 open() 方法

调用 send() 方法

open() 方法接收三个参数：请求类型，请求 url，是否使用异步；
send() 方法接受一个参数：请求主体发送的数据。

这个请求是同步的，浏览器会等到服务器响应之后继续执行，响应之后的相关属性：
responseText：响应主体返回的文本
status：响应的 HTTP 状态
statusText：响应的 HTTP 状态说明

在接收到响应后，应该这样检查两种状态

let request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.status >= 200 && request.status < 300 || request.status === 304){
        console.log(request.responseText)
    }else if(request.status >=400){
        console.log("错误信息：" + request.status)
    }
}
request.open("POST","http://jack.com:8889/xxx")
request.send()

大多数情况下，我们使用的是异步请求，才能 JS 继续执行，不必等待响应，此时应该检查readyState，这个属性有5种取值：

值	状态	描述
0	UNSENT(未打开)	open()方法还未被调用
1	OPENED(未发送)	send()方法还未被调用
2	HEADERS_RECEIVED(以获取响应头)	send()方法已经被调用，响应头和响应状态已经返回
3	LOADING(正在下载响应体)	响应体下载中；responseText中已经获取部分数据
4	DONE(请求完成)	整个请求过程已完毕

只要readyState属性值一变化，就会触发一次readystatechange事件，可以利用这个事件来检测每次状态变化后的readystate的属性值，通常我们只对readystate值为4进行检测。

let request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.readyState === 4){
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText)
        }else if(request.status >=400){
            console.log("错误信息：" + request.status)
        }
    }
}
request.open("POST","http://jack.com:8889/xxx")
request.send()

响应返回的requestText永远是字符串，早期使用的符合 XML 格式的字符串，现在使用的是符合 JSON 语法的字符串，前端拿到后可以用window.JSON.parse()来解析

具体来看一个例子：点击按钮发送一个 POST 请求


myButton.addEventListener("click",function(){
    let request = new XMLHttpRequest()
    request.onreadystatechange = function(){    //尽量往上放，不会错过任何一个状态，放在下面的话会错过之前的状态
        console.log(request.readyState)
        if(request.readyState === 4){        //请求完成
            if(request.status === 200){            //请求成功
                let string = request.responseText
                //把符合 JSON 语法的String 转换成 JS 对应的 Object
                let object = window.JSON.parse(string)    //JSON.parse 是浏览器提供的，json3.js是著名的就是写JSON.parse的
            }else if(request.status === 400){    //请求失败
                console.log("错误信息：" + request.status)
            }
        }
    }
    request.open("POST","http://jack.com:8889/xxx")    //配置 request
    request.send()
})

服务器上面就要这样写

if(path === "/xxx" && method === "POST"){
    response.setHeader("Content-Type","text/json;charset=utf-8")
    response.write(`        //JSON语法
        {            //Http第四部永远是 String，这里是符合 JSON 语法的
 String，不是 Object
            "note":{
                "to":"张三",
                "from":"李四",
                "heading":"打招呼",
                "content":"hi"
            }
        }
    `)
}

JavaScript 和 JSON 语法的不同之处

JS	JSON
undefined	没有
null	null
["a","b"]	["a","b"]
function{}	没有
{name:"frank"}	{"name":"frank"}
"frank"	"frank"
var a = {};a.self = a	搞不定(没有变量)
{__proto__}	没有原型链

跨域资源共享

Ajax 通信只能访问同一个域下的资源，简单的说如果不是同一个网站，不能送 AJAX 请求，它是状态码status为0。

只有协议+端口+域名一模一样才允许发 AJAX 请求
因为 AJAX 可以读取响应内容，因此浏览器不允许你这样做

有时也需要合理的跨域请求，有两种方法：

SRJ方案

CORS方案

SRJ 方案之前已经讲过了，这里不在重复，可以看：JSONP技术栈

这里讲解一个 CORS（Cross-Origin Resource Sharing，跨域源资源共享），基本思想就是使用自定义的 HTTP 响应头：

在服务器上，共享的资源加上响应头response.setHeader("Access-Control-Allow-Origin","http://jack.com:8889")就可以了。

如果没有这个头部，或者有这个信息但源信息不匹配，请求还是成功，但服务器给的响应没有响应体（第四部分）。注意：请求和响应都不包含 Cookie 信息。

云服务器 GPU云服务器 ajax工作原理 Ajax实现机制 get实现ajax ajax实现百度搜索

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

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

Ajax的原理和实现步骤

摘要：如果我们假设文件和文件位于相同的目录，那么代码是这样的其他方法如下编程步骤创建对象设置请求方式调用回调函数发送请求处理返回的结果创建对象一般来说手写的时候，首先需要判断该浏览器是否支持对象，如果支持则创建该对象，如果不支持则创建对象。 Ajax的简介什么是Ajax AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）...

Harpsichord1207 2019-08-26 18:42 评论0 收藏0
Ajax的原理和编程步骤

摘要：如果我们假设文件和文件位于相同的目录，那么代码是这样的其他方法如下编程步骤创建对象设置请求方式调用回调函数发送请求处理返回的结果创建对象一般来说手写的时候，首先需要判断该浏览器是否支持对象，如果支持则创建该对象，如果不支持则创建对象。 Ajax的简介什么是Ajax AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）...

phpmatt 2019-08-26 18:42 评论0 收藏0
深入浅出Ajax

摘要：在接收响应期间持续不断地触发。在请求发生错误时触发。在通信完成或者触发或事件后触发。已经接收到部分响应数据。基于标准被广泛支持。破坏程序的异常处理机制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 学习大纲理解Ajax的工作原理 Ajax核心-XMLHttpRequest对象封装Aja...

megatron 2019-08-22 18:39 评论0 收藏0
ajax跨域，这应该是最全的解决方案了

摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。前言从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识有限，如有差错，请多多见谅，欢迎提出iss...

ytwman 2019-08-22 11:21 评论0 收藏0
javascript跨域

摘要：实现跨域的原理通过方式请求载入并执行一个文件，相当于通过的形式的导入一个外部的方法语法该函数是简写的函数，等价于在中，您可以通过使用形式的回调函数来加载其他网域的数据，如。将自动替换为正确的函数名，以执行回调函数。更多详情见http://blog.zhangbing.club/Ja... 最近在项目开发的过程中遇到一些Javascript 跨域请求的问题，今天抽空对其进行总结一下，以...

PingCAP 2019-08-22 18:10 评论0 收藏0