Ajax
- 什么是Ajax
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，以此提高与服务器交互的效率
- 异步请求步骤
- 创建一个异步对象
- 设置请求方式和请求地址
- 发送请求
- 监听状态的变化
- 处理返回的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-ajax-get</title>
</head>
<body>
<button>发送请求</button>
<script type="text/javascript">
var btn=document.getElementsByTagName('button')[0];
btn.onclick = function(){
// 创建异步请求对象
// let xmlobj = new XMLHttpRequest();
var xmlobj = null;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlobj = new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
}
// 设置请求方式与请求地址
// xmlobj.open('GET','04-ajax-get.php',true);
xmlobj.open('GET','04-ajax-get.txt',true);
// 发送请求
xmlobj.send();
// 监听状态的变化
xmlobj.onreadystatechange = function(){
if(xmlobj.readyState == 4){
// 判断是否请求成功
if(xmlobj.status >= 200 && xmlobj.status < 300
|| xmlobj.status === 304){
// console.log('OK');
console.log(xmlobj.responseText);
}else{
console.log('FAILED');
}
}
}
}
</script>
</body>
</html>
- Ajax在IE浏览器中的缓存问题
- 在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为同一个URL只有一个结果
- 可采用以下三种方式解决上述问题
- AJAX请求的属性上直接设置
cache - 调用
$.ajaxSetup方法禁止掉Ajax的缓存机制 - 通过为URL地址添加后缀的方式解决问题
- AJAX请求的属性上直接设置
// 通过为URL地址添加后缀的方式
xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);
- Ajac请求的url问题
- 在URL中是不可以出现中文的, 如果出现了中文需要转码
- js中可以使用
encodeURIComponent()方法转码
- POST请求
- POST请求与GET请求基本一致,只是请求方法不一样
- 若要在请求过程中传参,使用
setRequestHeader()来添加HTTP头,然后在send()添加数据即可
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
jQuery-Ajax
在 jQuery中提供了对原生的AJAX的封装
-
load() 方法
$obj.load(url,data,callback)
// 作用：异步加载数据到 $obj 元素中
// url ：异步请求的地址
// data ：传递给服务器端的参数(可选)，
// 可以传递普通字符串，可以传递JSON
// callback：异步请求完成后要执行的操作(可选)
// 一般把回调函数设置如下：
function(resText,statusText){
resText : 响应数据
statusText : 响应的状态文本
}
-
$.get() 方法
$.get(url,data,callback,type)
// url : 异步请求地址
// data : 请求提交的数据，可以是字符串，可以是JSON
// callback : 请求成功时的回调函数
// type : 响应回来的数据的类型，即将响应回来的数据转化指定类型
// html : 响应回来的文本是html文本
// text : 响应回来的文本是普通文本
// json : 响应回来的数据是JSON对象
// 回调函数
function(resText){
resText : 表示响应回来的文本
}
$.ajax() 方法
$.ajax({请求参数的JSON对象})
// 参数对象中的属性
// url : 字符串，表示异步请求的地址
// type : 字符串，请求方式，get 或 post
// data : 传递到服务器端的参数，可以是字符串，可以是JSON对象
// dataType : 字符串，响应回来的数据的格式
// 'html'
// 'xml'
// 'text'
// 'script'
// 'json'
// 'jsonp'
// success:回调函数，请求和响应成功时回来执行的操作
// error : 回调函数，请求或响应失败时回来执行的操作
// beforeSend : 回调函数，发送ajax请求之前执行的操作，如果return false，则终止请求发送
同源策略
- 什么是同源策略
- 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能
- 所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域请求
- 同源策略带来的影响
- 在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据但在企业开发中
- 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的，这时如果再通过Ajax请求数据就会拿不到跨域数据
- 跨域解决方案
- jsonp
- document.domain+iframe
- location.hash + iframe
- window.name + iframe
- window.postMessage
- flash等第三方插件
- 通过
<script>向服务器资源发送请求，由服务器资源指定前端页面的哪个方法来执行响应的数据
- 前端
function flight(data){
let html = "<div>";
html += "<p>航班号:" + data.flightNO+"</p>";
html += "<p>出发:" + data.froms+"</p>";
html += "<p>到达:" + data.tos+"</p>";
html += "<p>时间:" + data.time+"</p></div>";
$("body").append(html);
}
$(function () {
$("#btn").click(function () {
let script = $('<script><\/script>');
script.attr('src','http://127.0.0.1:5000/flight_server?callback=flight');
$('body').append(script);
});
});
- 后端
@app.route('/flight_server')
def flight_server():
dic = {
"flightNO":"MU763",
"froms":'Beijing',
"tos":"New York",
"time":"16:55"
}
callback = request.args.get('callback')
res = callback +"(" + json.dumps(dic) + ")"
return res
jsonp
- 什么是jsonp
- jsonp让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据
- jsonp实现跨域访问的原理
- 在同一界面中可以定义多个
script标签 - 同一个界面中多个
script标签中的数据可以相互访问 - 可以通过
script的src属性导入其它资源 - 通过
src属性导入其它资源的本质就是将资源拷贝到script标签中 -
script的src属性不仅能导入本地资源, 还能导入远程资源 - 由于
script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据
- 在同一界面中可以定义多个
- JSONP优化
- 在企业开发中通过JSONP来获取跨域的数据,一般情况下服务器返回的都不会是一个变量, 而是一个函数的调用
- 当前服务器返回的函数调用名称写死了,服务器返回函数叫什么名称, 我们本地就必须定义一个叫什么名称的函数(通过URL参数的方式来动态指定函数名称)
- 由于script标签默认是同步, 前面的script标签没有加载完数据, 后面的script标签就不会被执行所以请求数据的script标签必须放到后面(通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的,不用等到前面的标签加载完就可以执行后面的script标签)
- jQuery中jsonp使用
$.ajax({
url: "http://127.0.0.1:80/jQuery/Ajax/22-jsonp.php",
data:{
"teacher": "wxm",
"age": 22
},
dataType: "jsonp", // 表示需要请求跨域的数据
jsonp: "cb", // 告诉服务器在获取回调函数名称的时候需要用什么key来获取
jsonpCallback: "test", // 告诉服务器在获取回调函数名称的时候回调函数的名称是什么
success: function (msg) {
console.log(msg);
}
});
网友评论