家居网站建设精英,单页主题 wordpress,中国工商商标局官网,单页应用网站AjaxJSON学习一 文章目录 前言一、Ajax简介1.1. Ajax基础1.2. 同源策略 二、Ajax的核心技术2.1. XMLHttpRequest 类2.2. open指定请求2.3. setRequestHeader 设置请求头2.4. send发送请求主体2.5. Ajax取得响应 总结 前言 一、Ajax简介
1.1. Ajax基础 Ajax 的全称是 Asynchron… AjaxJSON学习一 文章目录 前言一、Ajax简介1.1. Ajax基础1.2. 同源策略 二、Ajax的核心技术2.1. XMLHttpRequest 类2.2. open指定请求2.3. setRequestHeader 设置请求头2.4. send发送请求主体2.5. Ajax取得响应 总结 前言 一、Ajax简介
1.1. Ajax基础 Ajax 的全称是 Asynchronous JavaScript and XML异步的 JavaScript 和 XML是一种用于创建动态网页的技术。 Ajax 是一种使用现有标准的新方法通过与服务器进行少量的数据交换Ajax 可以使网页实现异步更新这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。
Ajax 可以提高系统性能优化用户界面。很多框架以及代码库已将 Ajax 作为其必不可少的一个重要模块。 Ajax 工作原理 在客户端和服务器之间加了一个中间层Ajax 引擎。由 Ajax 引擎独立向服务器请求数据前端获取到 Ajax 返回的数据后可以使用新数据来更新页面、或进行其它操作使用户请求和服务器响应异步化从而保证了在不刷新页面的前提下可以局部更新网页内容。 Ajax 使用示例 合理的利用 Ajax 技术可以创建出交互丰富的动态式网页让用户操作起来更加流畅较为典型的应用有
按需获取数据最大限度地减少冗余请求及响应对服务器造成的负担实时验证表单的某条数据无需等到提交整个表单时再验证页面无刷新更新更好的响应用户
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTryrun 1/title
/head
bodydiv idviewp点击下面的按钮将 Ajax 请求回来的数据更新在该文本内/p/divbutton typebutton idbtn发起 Ajax 请求/buttonscriptdocument.getElementById(btn).onclick ajaxRequest;function ajaxRequest () {var xhr new XMLHttpRequest();xhr.open(GET, https://www.w3cschool.cn/statics/demosource/ajax_info.txt, true);xhr.send();xhr.onreadystatechange function(){if (xhr.readyState 4 xhr.status 200) {document.getElementById(view).innerHTML xhr.responseText;} }}/script
/bodyAjax 的优缺点 Ajax 的优点
最大的优点是页面无刷新更新用户的体验非常好 使用异步方式与服务器通信具有更迅速的响应能力 可以将一些服务器工作转移到客户端利用客户端资源来处理减轻服务器和带宽的压力节约空间和带宽租用成本 技术标准化并被浏览器广泛支持不需要下载插件或者小程序 Ajax 可使因特网应用程序更小、更快、更友好。
Ajax 的缺点
Ajax 不支持浏览器 back 返回按钮 有安全问题Ajax 暴露了与服务器交互的细节 对搜索引擎不友好 破坏了程序的异常机制 不容易调试。
1.2. 同源策略 一个 URL 地址可以有以下几个组成部分scheme: //host:post/path?query#fragment scheme通信协议一般为 http 、https host域名 post端口号此项为可选项http 协议默认的端口号为 80https 协议默认的端口号为 443 path路径由 / 隔开的字符串 query查询参数此项为可选项 fragment信息片段用于指定网络资源中的某片断此项为可选项 什么是同源策略 同源策略是一种安全协议是客户端脚本尤其是 JavaScript中重要的安全度量标准指一段脚本只能读取同一来源的窗口和文档的属性。
划重点何为同源同源指的是 URL 地址中的 协议、域名、端口 三者 都 相同。 为什么要有同源策略 我们在使用 Ajax 请求后端数据时只能跟同源的后端接口进行数据交互即后端接口的 URL 与发起 Ajax 请求的页面 URL 之间需要满足同源策略。
为了数据的安全性。若没有同源策略的限制那么黑客就可以在他的页面上任意请求你的后端数据造成数据库内容被盗取、隐私数据泄漏。 实现跨域请求的方式 虽然 Ajax 请求需要满足同源策略然而在一些场景中你真的需要 Ajax 访问其它 “源” 的数据称为跨域访问这时需要后端服务器进行相应的设置。
如果服务器端支持 CORS可以通过设置Access-Control-Allow-Origin来实现跨域。如果浏览器检测到相应的设置就会允许 Ajax 进行跨域访问。扩展解决跨域问题的其它方式
JSONP 技术 在服务端设置代理模块 通过修改 window.name 实现跨域 使用 HTML5 中新引进的 window.postMessage 方法来跨域传送数据 等…
二、Ajax的核心技术
2.1. XMLHttpRequest 类 Ajax 技术的核心是XMLHttpRequest类简称 XHR它允许脚本异步调用 HTTP API 浏览器在XMLHttpRequest类上定义了 HTTP API这个类的每个实例都表示一个 独立 的 请求/响应 对象并且这个实例对象上的属性和方法允许 指定细节 和 提取响应数据。
// 变量xhr来表示这个实例
var xhr new XMLHttpRequest();2.2. open指定请求 创建 XMLHttpRequest 对象之后发起 HTTP 请求的下一步是调用 XMLHttpRequest 对象的open方法指定 HTTP 请求的两个必需部分请求方法 和 URL var xhr new XMLHttpRequest();
// 其中请求方法为大写
xhr.open(GET, /statics/demosource/demo_get_json.php);允许脚本以异步的方式发起 Ajax 请求是XMLHttpRequest技术的一个重要特性可避免发生因网速慢等原因导致脚本代码阻塞、页面卡死现象
2.3. setRequestHeader 设置请求头 如果你的 HTTP 请求需要设置请求头那么调用 open 方法之后的下个步骤就是设置它使用的方法是setRequestHeader 示例POST 请求设置 “Content-Type” 头来指定请求主体的编码格式
//语法
xhr.setRequestHeader(name, value)//示例
var xhr new XMLHttpRequest();
xhr.open(POST, /statics/demosource/demo_post_json.php);
// 在 open 方法之后设置请求头
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);说明 不能自己指定 “Content-Length”、“Date”、“Referer” 或 “User-Agent” 头XMLHttpRequest将自动添加这些头而防止伪造它们。类似地XMLHttpRequest对象还会自动处理 cookie、链接时间、字符集和编码判断所以你无法使用setRequestHeader方法设置它们。
2.4. send发送请求主体 使用 XMLHttpRequest 发起 HTTP 请求的最后一步是指定可选的请求主体、并向服务器发送它使用的方法是send 示例1GET 请求
var xhr new XMLHttpRequest();
xhr.open(GET, /statics/demosource/demo_get_json.php);// 无请求主体
xhr.send(null);GET 请求用于从服务器获取资源。它通常不需要传递请求主体因为它的参数通常都包含在 URL 中。因此在使用 XMLHttpRequest 对象发送 GET 请求时可以省略或传递 null 作为请求主体
示例2POST 请求
var xhr new XMLHttpRequest();
xhr.open(POST, /statics/demosource/demo_post_json.php);// 把 msg 作为请求主体发送
xhr.send(msg);POST 请求通常用于向服务器提交数据因此它通常需要具有请求主体可在 send 方法中指定它 POST 请求的请求主体应该匹配setRequestHeader方法所指定的 “Content-Type” 头。
2.5. Ajax取得响应 一个完整的 HTTP 响应由 状态码、响应头和 响应主体 组成这三者都可以通过XMLHttpRequest对象提供的属性和方法获取。 为了能够在 HTTP 响应准备就绪时得到通知必须监听XMLHttpRequest对象上的readystatechange事件。但为了理解这个事件类型需要先了解下readyState属性因为该事件监听的是readyState属性值的改变。 示例XMLHttpRequest对象上的readyState属性在 HTTP 请求过程中会从 0 变到 4 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
button idbtn点我观察 readyState 属性的改变/buttonscriptvar oBtn document.getElementById(btn);oBtn.onclick function () {var xhr window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject(Microsoft.XMLHTTP);alert(xhr.readyState);xhr.onreadystatechange function () {alert(xhr.readyState);}xhr.open(GET, /statics/demosource/demo_get_json.php);xhr.send();}/script
/body
/htmlreadyState属性是一个整数它的值代表了不同的 HTTP 请求状态。 readyState属性值的含义
0初始值表示请求未初始化open方法尚未调用 1启动请求open 方法已经调用但尚未调用 send 方法 2请求发送已经调用 send 方法但尚未接收到响应 3接收响应已经接受到部分响应数据主要是响应头 4HTTP 响应完成已经接收到全部响应数据而且可以在客户端使用。
即每次readyState属性值的改变都会触发readystatechange事件但只有readyState属性值为 4 时才是我们所关心的状态因为只有这个状态才表示 HTTP 的响应准备就绪可以真正意义上的结合服务器所响应的数据来实现我们的业务需求。
因此我们 Ajax 请求的代码通常都是这样的
var xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState 4) {oTip.innerText HTTP 响应完成;}
};xhr.open(GET, /statics/demosource/demo_get_json.php);
xhr.send();“响应完成” 只代表 HTTP 请求结束至于服务器的响应状态是请求成功还是请求错误又或者是服务器错误需要通过 HTTP 状态码判断它存储在XMLhttpRequest的status属性上 status属性会以数字的形式保存服务器响应的 HTTP 状态码 诸如使用最频繁的 “200” 表示请求成功“404” 表示 URL 不能匹配服务器上的任何资源。
HTTP 状态码是用来表示网页服务器响应状态的 3 位数字代码所有状态码的第一个数字代表了响应的五种状态之一
1xx临时响应 2xx成功 3xx重定向 4xx请求错误 5xx服务器错误
示例Ajax 请求成功
var xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if (xhr.status 200 xhr.status 300 || xhr.status 304) {oTip.innerText HTTP 请求成功;}
};xhr.open(GET, /statics/demosource/demo_get_json.php);
xhr.send();responseText属性以字符串的形式存储了响应主体即服务器的响应数据。 例如响应 JSON 数据
!DOCTYPE html
html langen
headmeta charsetUTF-8titlesss/title
/head
bodydiv页面更新于span idtime/span/divbrbutton idbtn点我发起 Ajax 请求/buttonscriptvar oBtn document.getElementById(btn),oTime document.getElementById(time);oBtn.onclick function () {var xhr window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject(Microsoft.XMLHTTP);xhr.onreadystatechange function () {if (xhr.readyState 4) return;if (xhr.status 200 xhr.status 300 || xhr.status 304) {var res JSON.parse(xhr.responseText);oTime.innerText res.date;}};xhr.open(GET, /statics/demosource/demo_get_json.php);xhr.send();}/script
/body
/html查询 HTTP 响应头的方法 在XMLHttpRequest对象上可通过getAllResponseHeaders和getResponseHeader方法查询响应头信息。 getAllResponseHeaders方法无参数用于一次性返回可查询的全部响应头信息 getResponseHeader方法用于查询单一响应头信息需要传入一个指定 “头名称” 的字符串作为参数getResponseHeader(headerName)
var xhr new XMLHttpRequest();xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if (xhr.status 200 xhr.status 300 || xhr.status 304) {// 查询 Content-Type 响应头信息alert( xhr.getResponseHeader(Content-Type) );}
};xhr.open(GET, /statics/demosource/demo_get_json.php);
xhr.send();Ajax 的同步响应 如果将false作为第三个参数传递给open方法那么调用send方法将 阻塞 后续脚本的执行 直到 HTTP 请求完成。在这种情况下不再需要监听readystatechange事件因为send方法后面的代码一定会等到 HTTP 请求完成后再执行。
var xhr new XMLHttpRequest();// 指定 open 方法的第三个参数为 false
xhr.open(GET, /statics/demosource/demo_get_json.php, false);// send 方法的调用将阻塞后面代码的执行直到此次 HTTP 请求完成
xhr.send();// 不再需要监听 readystatechange 事件
if (xhr.status 200 xhr.status 300 || xhr.status 304) {oTime.innerText JSON.parse(xhr.response).date;
} else {// 如果请求不成功就报错throw new Error(xhr.status);
} 若 HTTP 请求的时间超出预期可以调用XMLHttpRequest对象上的abort方法来中止 HTTP 请求。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv idtip页面更新于span idtime/span/divbrbutton idbtn点我发起 Ajax 请求/buttonhrp提示为了更加确保能演示出请求被中止示例中将定时器设置成 0 毫秒/pscriptvar oBtn document.getElementById(btn),oTime document.getElementById(time),oTip document.getElementById(tip);oBtn.onclick function () {var xhr window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject(Microsoft.XMLHTTP);var timer null;xhr.onreadystatechange function () {if (xhr.readyState ! 4) return;if (xhr.status 200 xhr.status 300 || xhr.status 304) {clearTimeout(timer);var res JSON.parse(xhr.responseText);oTime.innerText res.date;}};xhr.open(GET, /statics/demosource/demo_get_json.php);xhr.send();timer setTimeout(function(){xhr.abort();alert(请求被中止);oTip.innerText 页面加载超时;}, 0)}/script
/body
/html总结
–2023–12–15
