安徽省博物馆网站建设,网站开发实践意义,opencart做的网站,查网站域名备案查询系统第 1 章#xff1a;原生 AJAX
1.1 AJAX 简介
AJAX 全称为 Asynchronous JavaScript And XML#xff0c;就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求#xff0c; 最大的优势#xff1a;无刷新获取数据。 AJAX 不是新的编程语言#xff0c;而是…第 1 章原生 AJAX
1.1 AJAX 简介
AJAX 全称为 Asynchronous JavaScript And XML就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求 最大的优势无刷新获取数据。 AJAX 不是新的编程语言而是一种将现有的标准组合在一起使用的新方式。
1.2 XML 简介
XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似不同的是 HTML 中都是预定义标签而 XML 中没有预定义标签 全都是自定义标签用来表示一些数据.
比如说我有一个学生数据 name 孙悟空 ; age 18 ; gender 男 ; 用 XML 表示
student name孙悟空/name age18/age gender男/gender
/student现在已经被 JSON 取代了。
1.3 AJAX 的特点
1.3.1 AJAX 的优点
可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。
1.3.2 AJAX 的缺点
没有浏览历史不能回退存在跨域问题(同源)SEO 不友好
1.4 AJAX 的使用
1.4.1 核心对象
XMLHttpRequestAJAX 的所有操作都是通过该对象进行的。
1.4.2 使用步骤
创建 XMLHttpRequest 对象 var xhr new XMLHttpRequest();设置请求信息 xhr.open(method, url); //可以设置请求头一般不设置 xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);发送请求 xhr.send(body) //get 请求不传 body 参数只有 post 请求使用接收响应 //xhr.responseXML 接收 xml 格式的响应数据 //xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange function (){ if(xhr.readyState 4 xhr.status 200){ var text xhr.responseText; console.log(text); }
}1.4.3 解决 IE 缓存问题
问题在一些浏览器中(IE),由于缓存机制的存在ajax 只会发送的第一次请求剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式浏览器的缓存是根据 url 地址来记录的所以我们只需要修改 url 地址 即可避免缓存问题 xhr.open(get,/testAJAX?tDate.now());1.4.4 AJAX 请求状态
xhr.readyState 可以用来查看请求当前的状态 0: 表示 XMLHttpRequest 实例已经生成但是 open()方法还没有被调用。 1: 表示 send()方法还没有被调用仍然可以使用 setRequestHeader()设定 HTTP请求的头信息。 2: 表示 send()方法已经执行并且头信息和状态码已经收到。 3: 表示正在接收服务器传来的 body 部分的数据。 4: 表示服务器数据已经完全接收或者本次接收已经失败了
代码演示
1. ajax发送GET请求
get.html:
!DOCTYPE html
htmlheadmeta charsetutf-8titleAJAX GET 请求/titlestyle typetext/css#result {width: 200px;height: 100px;border: 1px solid pink;}/style/headbodybutton点击发送请求/buttondiv idresult/divscript// 获取button元素const btn document.getElementsByTagName(button)[0];const result document.getElementById(result);// 绑定事件btn.onclick function() {// 1.创建对象const xhr new XMLHttpRequest();// 2.初始化 设置请求方法 和 urlxhr.open(GET, http://127.0.0.1:8000/server?a100b200);// 3.发送xhr.send();// 4.事件绑定处理服务端返回的结果xhr.onreadystatechange function() {// 判断 (服务端返回了所有的结果)if (xhr.readyState 4) {// 判断响应状态码 200 404 403 500if (xhr.status 200 xhr.status 300) {// 处理服务端响应结果 行 头 空行 体// 1.响应行console.log(xhr.status); // 状态码console.log(xhr.statusText); // 状态状态字符串console.log(xhr.getAllResponseHeaders()); // 所有的响应头信息console.log(xhr.response); // 响应体信息 // 设置result的文本 result.innerHTML xhr.response;} else {}}}}/script/body
/html
server.js:
// 1. 引入express
const express require(express)// 2. 创建应用对象
const app express()// 3. 创建路由规则
app.get(/server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// response.header(Access-Control-Allow-Headers, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild);// 设置响应体response.send(hello ajax)
})// 4. 监听端口 启动服务
app.listen(8000, () {console.log(服务已经启动8000端口监听中...)
})2. ajax发送POST请求
server.js :
// 1. 引入express
const express require(express)// 2. 创建应用对象
const app express()// 3. 创建路由规则
app.get(/server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// response.header(Access-Control-Allow-Headers, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild);// 设置响应体response.send(hello ajax)
})app.post(/server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// response.header(Access-Control-Allow-Headers, Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild);// 设置响应体response.send(hello ajax post)
})// 4. 监听端口 启动服务
app.listen(8000, () {console.log(服务已经启动8000端口监听中...)
})post.html:
!DOCTYPE html
htmlheadmeta charsetutf-8titleAJAX POST 请求/titlestyle typetext/css#result {width: 200px;height: 100px;border: 1px solid pink;}/style/headbodyp当鼠标悬浮在div上时发送请求/pdiv idresult/divscriptconst result document.getElementById(result);// 绑定事件result.addEventListener(mouseover, function() {// console.log(test)// 1. 创建对象const xhr new XMLHttpRequest();// 2. 初始化 设置请求类型 和 urlxhr.open(POST, http://127.0.0.1:8000/server)// 3. 发送xhr.send(aaa100bbb200)// 4. 事件绑定xhr.onreadystatechange function() {// 判断if(xhr.readyState 4) {if(xhr.status 200 xhr.status 300) {// 处理服务器返回的结果result.innerHTML xhr.response} else {}}}}) /script/body
/html ajax服务端响应json数据
json.html:
!DOCTYPE html
htmlheadmeta charsetutf-8titleJSON/titlestyle typetext/css#result {width: 200px;height: 100px;border: 1px solid pink;}/style/headbodyp当按下键盘时发送请求/pdiv idresult/divscriptconst result document.getElementById(result);// 绑定键盘按下事件window.onkeydown function () {// console.log(test)// 发送请求const xhr new XMLHttpRequest();// 设置响应体数据类型xhr.responseType json// 初始化xhr.open(GET, http://127.0.0.1:8000/json-server)// 发送xhr.send()// 事件绑定xhr.onreadystatechange function () {if(xhr.readyState 4) {if(xhr.status 200 xhr.status300) {// 处理服务端返回结果// console.log(xhr.response)// result.innerHTML xhr.response// 手动对服务器返回的数据进行转化/* let data JSON.parse(xhr.response)console.log(data)result.innerHTML data.name */// 自动转换 通过设置响应体数据类型xhr.responseType jsonconsole.log(xhr.response)result.innerHTML xhr.response.name}}}}/script/body
/html
server.js:
// 1. 引入express
const express require(express)// 2. 创建应用对象
const app express()// 3. 创建路由规则
app.get(/server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// 设置响应体response.send(hello ajax)
})// all 可以接收任意类型的请求
app.all(/server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// 允许前端post请求 自定义请求头名称response.header(Access-Control-Allow-Headers, *);// 设置响应体response.send(hello ajax post)
})app.all(/json-server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// 允许前端post请求 自定义请求头名称response.header(Access-Control-Allow-Headers, *);// 响应一个数据const data {name: zep};// 对 对象进行字符串转换let str JSON.stringify(data)// 设置响应体,send方法只接收字符串类型的参数response.send(str)
})// 4. 监听端口 启动服务
app.listen(8000, () {console.log(服务已经启动8000端口监听中...)
})手动对服务端返回的字符串数据进行转换把字符串转成对象 自动转换通过设置响应体数据类型xhr.responseType ‘json’
