服务器建站教程,wordpress发不文章不按顺序怎么办,做网站登录,易企秀 旗下 网站建设第 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 age18/age gender男/gender /student // 现在已经被 JSON 取代了。 // 用 JSON 表示 {name:孙悟空,age:18,gender:男}
最开始ajax进行数据交换的时候所使用的格式就是XML,服务器给客户端返回结果时返回的是XML格式的字符串前端js 接到结果后对内容进行解析把数据提取出来做一个处理。而现在进行ajax应用的时候不再使用XML了现在主要用JSON格式JSON相对于XML更加简洁在数据转换的时候也更加容易可以借助JSON的一些API方法快速将JSON转换为js对象灵活度远胜于XML.
1.3 AJAX 的特点
1.3.1 AJAX 的优点
1) 可以无需刷新页面而与服务器端进行通信。
2) 允许你根据用户事件来更新部分页面内容。
1.3.2 AJAX 的缺点
1) 没有浏览历史不能回退
2) 存在跨域问题(同源)
3) SEO 不友好
1.4 AJAX 的使用
1.4.1 核心对象
XMLHttpRequestAJAX 的所有操作都是通过该对象进行的。
1.4.2 使用步骤 // 1) 创建 XMLHttpRequest 对象 var xhr new XMLHttpRequest(); // 2) 设置请求信息 xhr.open(method, url); // 可以设置请求头一般不设置 xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); // 3) 发送请求 xhr.send(body) //get 请求不传 body 参数只有 post 请求使用 // 4) 接收响应 //xhr.responseXML 接收 xml 格式的响应数据 //xhr.responseText 接收文本格式的响应数据 xhr.onreadystatechange function (){ if(xhr.readyState 4 xhr.status 200){ var text xhr.responseText; console.log(text); } } // xhr.onreadystatechange 处理服务器返回的结果
1.4.3 解决 IE 缓存问题
问题在一些浏览器中(IE),由于缓存机制的存在ajax 只会发送的第一次请求剩
余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式浏览器的缓存是根据 url 地址来记录的所以我们只需要修改 url 地址
即可避免缓存问题
xhr.open(get,/testAJAX?tDate.now());
1.4.4 AJAX 请求状态
xhr.readyState 可以用来查看请求当前的状态
XMLHttpRequest.readyState - Web API 接口参考 | MDN
0: 表示 XMLHttpRequest 实例已经生成但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用仍然可以使用 setRequestHeader()设定 HTTP
请求的头信息。
2: 表示 send()方法已经执行并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收或者本次接收已经失败了
第 2 章jQuery 中的 AJAX
2.1 get 请求
$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式xml, html, script, json, text, _default。
2.2 post 请求
$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式xml, html, script, json, text, _default。
第 3 章跨域
3.1 同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出是浏览器的一种安全策略。
同源 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
3.2 如何解决跨域
3.2.1 JSONP
1) JSONP 是什么
JSONP(JSON with Padding)是一个非官方的跨域解决方案纯粹凭借程序员的聪明
才智开发出来只支持 get 请求。
2) JSONP 怎么工作的
在网页有一些标签天生具有跨域能力比如img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。
3) JSONP 的使用
1.动态的创建一个 script 标签
var script document.createElement(script);
2.设置 script 的 src设置回调函数
script.src http://localhost:3000/testAJAX?callbackabc;
function abc(data) {
alert(data.name);
};
3.将 script 添加到 body 中
document.body.appendChild(script);
4.服务器中路由的处理
router.get(/testAJAX , function (req , res) {
console.log(收到请求);
var callback req.query.callback;
var obj {
name:孙悟空,
age:18
}
res.send(callback(JSON.stringify(obj)));
});
4) jQuery 中的 JSONP !DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head body button idbtn按钮/button ul idlist/ul script typetext/javascript src./jquery-1.12.3.js/script script typetext/javascript window.onload function () { var btn document.getElementById(btn) btn.onclick function () { $.getJSON(http://api.douban.com/v2/movie/in_theaters?callback?,function (data) { console.log(data); //获取所有的电影的条目 var subjects data.subjects; //遍历电影条目 for(var i0 ; isubjects.length ; i){ $(#list).append(li subjects[i].titlebr / img src\subjects[i].images.large\ /li); } }); } } /script /body /html
3.2.2 CORS
跨源资源共享CORS - HTTP | MDN
1) CORS 是什么
CORS
Cross-Origin Resource Sharing跨域资源共享。CORS 是官方的跨域解决方
案它的特点是不需要在客户端做任何特殊的操作完全在服务器中进行处理支持
get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段允许服务器声明哪些
源站通过浏览器有权限访问哪些资源
2) CORS 怎么工作的
CORS 是通过设置一个响应头来告诉浏览器该请求允许跨域浏览器收到该响应
以后就会对响应放行。
3) CORS 的使用
主要是服务器端的设置
router.get(/testAJAX , function (req , res)
//通过 res 来设置响应头来允许跨域请求
//res.set(Access-Control-Allow-Origin,http://127.0.0.1:3000);
res.set(Access-Control-Allow-Origin,*);
res.send(testAJAX 返回的响应);
});
