昨天学的有点乱 今天整理一下
AJAX
全称：Asychronous JavaScript And XML
是一种异步加载数据的技术
可以通过使用Ajax，实现页面的局部更新
Ajax 的核心对象：XMLHttpRequest
GET 取得数据
数据放到了URL
不怎么安全
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<h1></h1>
<script type="text/javascript">
//1创建ajax对象
var xhr = new XMLHttpRequest()
//4监听请求
xhr.onreadystatechange = function(){
//当xhr对象属性发生改变 就会触发
// onreadystate
//0. 对象已经创建 但是没有进行初始化操作
//2. xhr对象已经调用了open
//3 已经返回了部分数据
//4 数据全部返回
if(xhr.readyState !== 4){
return
}
if(xhr.status>=200&&xhr.status<=300){
//数据放在了xhr.responseText的属性中(string)
document.querySelector('h1').innerText = xhr.responseText
}else{
console.error("请求失败")
}
}
//2打开这个对象
xhr.open("get","test.txt",true)
//3发送请求
xhr.send()
</script>
</body>
</html>
POST 发送数据
数据放到了请求体中
可以加密 安全
下方代码块缺少本地服务器 咱也不知道咋整 先搁着吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1.创建一个xhr对象
var xhr = new XMLHttpRequest()
//5.监听数据返回
xhr.onreadystatechange = function(){
if(xhr.readyState !== 4){
return
}
if(xhr.status >= 200 && xhr.status <=300){
var resp = JSON.parse(xhr.responseText)
if(resp.result){
alert("成功")
}else{
alert("失败")
}
}else{
console.error("请求失败")
}
}
//2.配置这个对象
xhr.open('POST','login.php',true)
//设定请求头 指明body内的数据是什么格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//4.发送数据
xhr.send('user=gap&password=123456')
//
</script>
</body>
</html>
promise基本用法
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
var num = Math.floor(Math.random()*100)
if(num%2 ===0 ){
resolve(num)
}else{
reject(num)
}
},3000)
})
promise.then(function(num){
console.log('resolve:' + num)
}).catch(function(num){
console.log('reject:'+num)
})
回调地狱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//三个同步函数
x = getData()
y = getMoreData(x)
getMoreData(y)
getMoreData(function(x){
getMoreData(x,function(y){
getMoreData(y,function(z){
//process z.
})
})
})
</script>
</body>
</html>
正常的打开方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>444</title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<p></p>
<script type="text/javascript">
var article = ''
$.get("./wenzhang.txt",function(p1){
article += p1+"<br>"
$.get("./wenzhang1.txt",function(p2){
article += p2+"<br>"
$.get("./wenzhang2.txt",function(p3){
article += p3 +"<br>"
$('p').html(article)
})
})
})
</script>
</body>
</html>
用promise解决回调地狱问题（成功了/ -）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p></p>
<script type="text/javascript">
function p1(){
return new Promise(function(resolve,reject){
$.get('./wenzhang.txt',function(p1){
resolve(p1)
})
})
}
function p2(){
return new Promise(function(resolve,reject){
$.get('./wenzhang1.txt',function(p2){
resolve(p2)
})
})
}
function p3(){
return new Promise(function(resolve,reject){
$.get('./wenzhang2.txt',function(p3){
resolve(p3)
})
})
}
function p4(){
return new Promise(function(resolve,reject){
$.get('./wenzhang3.txt',function(p4){
resolve(p4)
})
})
}
var article = ''
p1().then(function(p1){
article += p1+"<br>"
return p2()
}).then(function (p2){
article += p2+"<br>"
return p3()
}).then(function (p3){
article += p3+"<br>"
return p4()
}).then(function (p4){
article += p4+"<br>"
$("p").html(article)
})
</script>
</body>
</html>
ajax的同源策略
一、什么是同源？
1995年由Netscape提出，现在所有浏览器都支持这一政策。
两个不同的网站无法互相访问同源策略限制的内容。
二、如何确定两个网页同源？
三个相同：
协议相同: http://或https://
域名相同: www.baidu.com
端口号相同: 80端口（默认80端口）
只有有一个不同那将不是同源。
三、设置同源的目的
设置同源策略的⽬的：保护⽤户数据安全，⽅式信息被恶意⻚⾯获取到。
A⽹站是⼀家银⾏，⽤户登录以后，又去浏览其他⽹站。如果其他⽹站可以读取A⽹站的 Cookie，会发⽣什么？
四、同源策略限制的范围
1、Cookie、localStorage、IndexDB⽆法读取。
2、DOM⽆法取得。
3、AJAX请求不能发送。
function addScriptTag(src) {
var script =
document.createElement('script');
script.setAttribute("type","text/
javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/
ip?callback=foo');
}
function foo(data) {
console.log('Your public IP address
is: ' + data.ip);
};
五、ajax规避同源策略
规避同源策略：使用jsonp或者服务器端实现跨域。
一般使用服务器端实现跨域，因为jsonp既需要设置服务器端又要设置浏览器端，成本相对较高。而服务器端则只需要设置服务器端。
1、通过jsonp实现跨域请求
1)html内容：
// 1、创建script标签
var scriptTag = document.createElement('script');
// 2、配置标签属性
scriptTag.type = 'text/javascript';
scriptTag.src = 'http://10.0.156.213/data.php?cb=fn1';
// 3、把标签拼接进文档流
document.head.appendChild(scriptTag);
// 回调函数
function fn1(obj) {
console.log(obj);
}
2）服务器端代码（一般使用PHP写后台代码）
image
2、通过服务器端处理跨域
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET','http://wthrcdn.etouch.cn/weather_mini?city=北京',true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
}
}
请求路径上的链接地址一般是公共端口。
作者：清心挽风
链接：https://www.jianshu.com/p/3d44c22813e9
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
跨域
1.JSONP
json
JavaScript Object Notation
是一种轻量级的数据交换格式
js对象的自己 与js无缝对接
json数据与js对象的转换
1.JSON => js:JSON.parse(data)
2.JS => JSON:JSON.stringify(JSObj)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="text">
<ul></ul>
<script type="text/javascript">
function getData(data){
var script = document.querySelector("#jsonp")
script.parentNode.removeChild(script)
$("ul").html("")
for(var i = 0;i<data.length;i++ ){
$("li")+data.s[i]+"</li>".appendTo("ul")
}
}
function getlist(wd){
var script = document.createElement("script")
script.id = "jsonp"
//?????????????
script.src = "http://sp0.baidu.com/65d7LyCz7sGUII5tET%2Bsdui6oe%2F2sRsBlvSmv0y9R8jr8dpCl4McAB3Y3vZbOSJhfHaq/su?cb=getData&wd="+wd;
document.body.appendChild(script)
}
$("input").keyup(function(){
var wd = $(this).val()
getlist(wd)
})
</script>
</body>
</html>
CORS 跨域资源共享
ie10以上都支持
