soso搜搜网站收录提交入口,网站建设带后台带微商城,百度站长工具seo查询,唐山网站设计公司1.了解Ajax
1.1 什么是ajax
Ajax的全称是Asynchronous Javascript And XML#xff08;异步Js和XML#xff09;.
通俗的理解#xff1a;在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式#xff0c;就是Ajax
1.2 为什么要学习Ajax
之前所学的技术#xff0c…1.了解Ajax
1.1 什么是ajax
Ajax的全称是Asynchronous Javascript And XML异步Js和XML.
通俗的理解在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax
1.2 为什么要学习Ajax
之前所学的技术只能把网页做的更美观漂亮或添加一些动画效果但是,Ajax能让我们轻松实现网页与服务器之间的数据交互。 1.3 Ajax的典型应用场景 2.JQ中的Ajax
2.1 了解JQ中的Ajax
浏览器中提供的XMLHttpRequest用法比较复杂所以JQ对XMLHttpRequest进行了封装提供了一系列Ajax相关的函数极大地降低了Ajax的使用难度
JQ中发起Ajax请求最常用的三种方法如下
A. $.get();
B. $.post()
C. $.ajax()
2.2 $.get()函数语法
JQ中$.get()函数的功能单一专门用来发起get请求从而将服务器上的资源请求到客户端来进行使用。$.get()函数的语法如下:
$.get(url,[data],[callback]);
其中三个参数各自代表的含义如下
参数名参数类型是否必选说明urlstring是要请求的资源地址dataobject否请求资源期间要携带的参数callbackfunction否请求成功时的回调函数
bodybutton onclickgetInfo()请求/button
/body
scriptfunction getInfo() {$.get(http://localhost:9000/ajaxText, function (res) {console.log(res)});}
/script
2.3 $.post()函数的语法
JQ中$.post()函数的功能单一专门用来发起post请求,从而向服务器提交数据。
$.post()函数的语法如下
$.post(‘地址’,function (res){
console.log(res);//这里的res是服务器返回的数据
})
其中三个参数各自代表的含义如下
参数名参数类型是否必选说明urlstring是要请求的资源地址dataobject否请求资源期间要携带的参数callbackfunction否请求成功时的回调函数
2.4 $.ajax()函数的语法
相对于$.get()和$.post()函数JQ中提供的$.ajax()函数是一个功能比较综合的函数它允许我们对Ajax请求进行更详细的配置。
$.ajax()函数的基本语法如下
$.ajax({
type:’’,//请求的方式例如get或post
url:’’,//请求的url地址
data:{},//这次请求要携带的数据
success:function (res){}//请求成功之后的回调函数
}); bodybutton onclickgetInfo()请求get/buttonbutton onclickgetInfo2()请求post/buttonbutton onclickgetInfo3()请求ajax/button
/body
scriptfunction getInfo() {$.get(http://localhost:1234/data, function (res) {console.log(res)});}function getInfo2() {$.post(http://localhost:1234/data1, function (res) {console.log(res);});}function getInfo3() {$.ajax({type: get,url: http://localhost:1234/data,success: function (res) {console.log(res);}});}
/script
3.接口
3.1 接口的概念
使用Ajax请求数据时被请求的URL地址就叫做数据接口简称接口同时每个接口必须有请求方式。
3.2 分析接口的请求过程
3.2.1 通过get方式请求接口的过程 3.2.2 通过post方式请求接口的过程
和get方式请求的逻辑差不多
3.3 接口文档
3.3.1 什么是接口文档
接口文档顾名思义就是接口的说明文档它是我们调用接口的依据好的接口文档包含了对接口URL,参数以及输出内容的说明我们参照接口文档就能方便的知道接口的作用以及接口如何进行调用。
3.3.2 接口文档的组成部分
接口文档可以包含很多信息也可以按需进行精简不过一个合格的接口文档应该包含以下6项内容从而为接口的调用提供依据
A. 接口名称用来标识各个接口的简单说明如登录接口获取图书列表接口等
B. 接口接口的调用地址
C. 调用方式接口的调用方式如get或post
D. 参数格式接口需要传递的参数每个参数必须包含参数名称、参数类型、是否必须、参数说明这4项内容
E. 响应格式接口的返回值详细描述一般包括数据名称、数据类型、说明三项内容
F. 返回示例可选通过对象的形式列举
4.Ajax加强
4.1 XMLHttpRequest的基本使用
4.1.1 什么是XMLHttpRequest
XMLHttpRequest(简称xhr)是浏览器提供的JS对象通过它可以请求服务器上的数据资源。之前所学的JQ中的Ajax函数就是基于xhr封装出来的。 4.1.2 使用xhr发起GET请求
步骤
A. 创建xhr对象
B. 调用xhr.open()函数
C. 调用xhr.send()函数
D. 监听xhr.onreadystatechange事件
bodybutton onclickgetData()xhr-get/button
/body
script//get请求function getData() {// A.创建xhr对象var xhr new XMLHttpRequest();// B.调用xhr.open()函数xhr.open(get, http://localhost:1234/data);// C.调用xhr.send()函数xhr.send();// D.监听xhr.onreadystatechange事件xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {console.log(xhr.responseText);}}}
/script
4.1.3 了解xhr对象的readyState属性
XMLHttpRequest对象的readyState属性用来表示当前Ajax请求所处的状态。每个Ajax请求必须处于以下状态中的一个
值状态描述0UNSENTXMLHttpRequest对象已被创建但尚未调用open方法1OPENEDOpen()方法已经被调用2HEADRES_RECEIVEDSend()方法已经被调用响应头也已经被接受3LOADING数据接受中此时response属性中已经包含部分数据4DONEAjax请求完成这意味着数传输已经彻底完成或失败
4.1.4 使用xhr发送带参数的GET请求
使用xhr对象发起带参数的GET请求时只需在调用xhr.open期间为URL地址指定参数即可
xhr.open(get, http://localhost:1234/books?id999); 这种在URL地址后面拼接的参数叫做查询字符串
4.1.5 查找字符串
1.什么是查找字符串
定义查询字符串URL参数是指在URL的末尾加上用于向服务器发送信息的字符串变量。格式将英文?放在URL的末尾然后再加上参数值想加上多个参数的话使用符号进行分隔。以这个形式可以将想要发送给服务器的数据添加到URL中。
1.什么是URL编码
URL地址中只允许出现英文相关的字母、标点符号、数字因此在URL地址中不允许出现中文字符。如果URL中出现包含中文这样的字符则必须对中文字符进行编码转义.
URL编码的原则使用安全的字符没有特殊用途或者特殊意义的可打印字符去表示那些不安全的字符。URL编码原则的通俗理解:使用英文字符去表示非英文字符
// 不带参数
// xhr.open(get, http://localhost:1234/data);
// 带一个参数的
// xhr.open(get, http://localhost:1234/books?id999);
// 带两个参数的
xhr.open(get, http://localhost:1234/books?id999name张三);
2.get请求携带参数的本质
无论使用$.ajax(),还是使用$.get()又或者直接使用xhr对象发起GET请求当需要携带参数的时候本质上都是直接将参数以查询字符串的形式追加到URL地址的后面发送到服务器的。
4.1.6 编码与解码
1.什么是URL编码
URL地址中只允许出现英文相关的字母、标点符号、数字因此在URL地址中不允许出现中文字符。如果URL中出现包含中文这样的字符则必须对中文字符进行编码转义.
URL编码的原则使用安全的字符没有特殊用途或者特殊意义的可打印字符去表示那些不安全的字符。URL编码原则的通俗理解:使用英文字符去表示非英文字符
http://localhost:1234/books?id999name张三
//经过URL编码之后URL地址变成如下格式
http://localhost:1234/books?id999name%E5%BC%A0%E4%B8%89
2.如何对URL进行编码与解码
浏览器提供了URL编码与解码的API,分别是
A. encodeURI()编码的函数
B. decodeURI()解码的函数
var temp 程序员;
console.log(encodeURI(temp));//%E7%A8%8B%E5%BA%8F%E5%91%98
console.log(decodeURI(%E7%A8%8B%E5%BA%8F%E5%91%98)); //程序员
3.URL编码的注意事项
由于浏览器会自动对URL地址进行比编码操作因此大多数情况下程序员不需要关心URL地址的编码与解码操作
4.1.7 使用xhr发送post请求
步骤
A. 创建xhr对象
B. 调用xhr.open()函数
C. 设置Content-Type属性固定写法
D. 调用xhr.send()函数同时指定要发送的数据
E. 监听xhr.onreadystatechange事件
// A.创建xhr对象
var xhr new XMLHttpRequest();
// B.调用xhr.open()函数
xhr.open(post, http://localhost:1234/data1);// C.设置Content - Type属性固定写法
xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);// D.调用xhr.send()函数同时指定要发送的数据
xhr.send();// E.监听xhr.onreadystatechange事件
xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {console.log(xhr.responseText);}
}
5.跨域和Jsonp
5.1 了解同源策略和跨域
5.1.1 同源策略
5.1.1.1 什么是同源
如果两个页面的协议域名和端口都相同则两个页面具有相同的源
例如下表给出了相对于http://www.test.com/index.html页面的同源检测。 5.1.1.2 什么是同源策略
同源策略是浏览器提供的一个安全功能。
MDN官方给定的概念同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解浏览器规定A网站的JS,不允许和非同源的网站C之间进行资源的交互例如
A. 无法读取非同源网页的Cookie、LocalStorage和IndexedDB
B. 无法接触非同源网页的DOM
C. 无法向非同源地址发送Ajax请求
5.1.2 跨域
5.1.2.1 什么是跨域
同源指的是两个URL的协议、域名、端口一致反之则是跨域
出现跨域的根本原因浏览器的同源策略不允许非同源的URL之间进行资源的交互
网页http://www.test.com/index.html
接口http://www.api.com/userlist
5.1.2.2 浏览器对跨域请求的拦截 5.1.2.3 如何实现跨域数据请求
现如今实现跨域数据请求最主要的两种解决方案分别是JSONP和CORS
JSONP:出现的早兼容性好兼容低版本IE,是前端程序员为了解决跨域问题被迫想出来的一种临时解决方案。确定是只支持GET请求不支持POST请求
CORS:出现的较晚它是W3C标准属于跨域Ajax请求的根本解决 方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。
5.2 JSONP
5.2.1 什么是JSONP
JSONP是JSON的一种”使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
5.2.2 jsonp实现原理
由于浏览器同源策略的限制网页中无法通过Ajax请求非同源的接口数据。但是script标签不受浏览器同源策略的影响可以通过src属性请求非同源的JS脚本。
因此JSONP的实现原理就是通过script标签的src属性请求跨域的数据接口并通过函数调用的形式接受跨域接口响应回来的数据
5.3 综合运用 npm init npm --registry https://registry.npmmirror.com install mysql bootatrap express api/http.js
const express require(express);
const app express();
const cors require(cors);
const db require(./02db);// 解决跨域
app.use(cors()); // 关联express 和 cors之间的关系/*** req请求变量* res响应变量* next回调函数*/
app.all(*, function (req, res, next) {res.setHeader(Access-Control-Allow-Origin, *);next();
});app.get(/student/selectByLoginNameAndPwd, function (req, res) {db.selectByLoginNameAndPwd(req.query.loginName,req.query.loginPwd,function (data) {res.json(data);});
});// 设置端口
app.listen(2121, function () {console.log(端口2121已启动正在加载......);
});api/db.js
const mysql require(mysql); // 引入第三方模块内// 创建要连接的数据库对象
const connection mysql.createConnection({host: localhost,user: root,password: 123456,database: school2,
});// 打开数据库连接的桥梁
connection.connect();module.exports.selectByLoginNameAndPwd function (name, pwd, callback) {let sql select * from student where LoginName${name} and LoginPwd ${pwd};connection.query(sql, function (err, data) {if (err) {callback(err);} else {callback(data);}});
};html/login.html
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title登录/titlelinkrelstylesheethrefhttps://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css/script srchttps://cdn.staticfile.org/jquery/2.1.1/jquery.min.js/scriptscript srchttps://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js/scriptstylehtml,body {height: 100%;}.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}/style/headbodydiv classcontainerh1登录/h1div classloginWrapper stylewidth: 400pxdiv classusernamespan登录名/spaninput typetext idname classform-control //divdiv classpasswordspan密码/spaninput typetext idpwd classform-control //div/divbuttonclassbtn btn-infostylewidth: 200px; margin-top: 15pxonclicklogin()登录/button/div/bodyscriptfunction login() {$.ajax({url: http://localhost:2121/student/selectLoginNameAndPwd,data: {loginName: $(#name).val(),loginPwd: $(#pwd).val(),},success: (res) {console.log(res);},});}/script
/html
