AJAX
1.概念
AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一门技术。
简单来说:ajax是一门技术,不是一门语言,可以在不用加载整个网页的情况下,就可以对局部网页做刷新,刷新的时候,无刷新操作
2.特点
优点:
1.可以无刷新页面与后端通信
2.可以根据用户操作进行局部的数据更新
缺点:
1.不会有历史记录,不能够回退到上一个页面
2.会出现跨域问题
3.SEQ不友好,也就是搜索引擎对ajax多的页面,不容易搜到
3.使用
原生js中使用
1.创建XMLHttpRequest对象
2.设置请求信息,open方法
格式:XMLHttpRequest对象.open("请求方法","请求地址?参数名=参数值&参数名=参数值",)
注意:post方式不设置参数
3.发送请求,send()方法
格式:XMLHttpRequest对象.send("参数名=参数值&参数名=参数值")
注意:get方式不需要在这里传递参数
4.客户端接收响应数据,onreadystatechange
格式:XMLHttpRequest对象.onreadystatechange = function(){
}
注意:ajax请求状态
0:请求未初始化
1:与服务器建立连接
2:请求发送
3:请求接收并处理
4:请求处理完成,响应就绪
Jquery中ajax使用
get请求
格式:$.get(url, [data], [callback], [type])
url:请求的URL地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式， html, json, text, _default,默认的是text。
post请求
格式:$.post(url, [data], [callback], [type])
url:请求的URL地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式， html, json, text, _default。
跨域
1.概念
同源策略:协议、域名、端口号 必须完全相同。
违背同源策略就是跨域,也就是协议,端口,域名有任一个不同.
2.解决方法
jsonp:
非官方的跨域解决方法,只支持get方式
原理:利用script标签的跨域能力发送请求
使用:
1.常见一个script标签
var script = document.createElement("script");
2.设置script的src属性,并设置一个回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
3.将script添加到body中
document.body.appendChild(script);
4.服务器中路由的处理,也就是将响应书转换为json格式,通过函数传递出去,
注意:原生js的使用,传递的函数要与页面写的函数名一致
jq中使用,传递的函数是req.query.callback方法
router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {
name:"孙悟空",
age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});
cors:
官方跨域解决方案,在服务器中处理,支持get和post
原理:通过设置一个响应头让浏览器知道该请求跨域,最终放行响应.
使用:
主要是服务器端的设置：
router.get("/testAJAX" , function (req , res) {
//通过res来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://localhost:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX返回的响应");
});