[TOC]
## 跨域
### 1.什么叫跨域
```
不同域之間請求資源就算做跨域。
```
### 2.什么叫不同域
```
當協議，子域名，主域名，端口號，任意一個不同時,就算作不同的域。
```
### 3.如何解決跨域
```
1. jsonp
2. js中script標簽不受同源策略的影響也可以實現跨越
```
## Ajax
### 1. Ajax請求步驟
```
(1) 創建Ajax異步調用對象 var xhr = new XMLHttpRequest
(2) 創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息
與服務器建立連接 open（Method，Url，IsAsync）
(3) 發送HTTP請求 xhr.send()
(4) 接受服務器的返回數據 xhr.onreadystatechange = function(){
}
```
### 2.原生ajax請求
```
var url = "https://www.easy-mock.com/mock/5bac6df10132334db7167178/testDemo/testDemo";
var xhr = new XMLHttpRequest();
xhr.open('get',url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var txt = JSON.parse(xhr.responseText);
console.log(txt);
}
}
```
### 3. 同步異步區別
同步強調的是順序性.誰先誰后.異步則不存在這種順序性.
```
同步：瀏覽器向服務器發送請求的時候，用戶不能進行操作
異步：瀏覽器向服務器發送請求的同時，用戶依然可以操作
```
### 4.get方式和post方式的區別
```
1）視覺上傳參， Get 方式在通過 URL 提交數據，數據 在URL中可以看到；POST方式，數據放置在HTML HEADER內提交。
2）大小 GET方式提交的數據最多只能有1024字節（瀏覽器限制的），而POST則沒有此限制。
3）安全性 使用 Get 的時候，參數會顯示在地址欄上，而 Post 不會。所以，如果這些數據是中文數據而且是非敏感數據，那么使用 get ；如果用戶輸入的數據不是中文字符而且包含敏感數據，那么還是使用 post 為好。
get參數通過url傳遞，post放在request body中。
get請求在url中傳遞的參數是有長度限制的，而post沒有。
get比post更不安全，因為參數直接暴露在url中，所以不能用來傳遞敏感信息。
對于GET方式的請求，瀏覽器會把http header和data一并發送出去，服務器響應200（返回數據）；
而對于POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據
```
## 1.請求數據
### jQuery請求
~~~
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
~~~
- 1.ajax
~~~
$.ajax({
url:"https://douban.uieee.com/v2/movie/top250",
type:"get",
dataType:"jsonp",
success:function(res){
console.log(res)
var title = res.subjects[0].title;
var img = res.subjects[0].images.small
$("img").attr("src",img);
$("p").html(title);
}
})
~~~
- 2.get
```
var url="https://douban.uieee.com/v2/movie/top250";
$.get(url,res=>{
console.log(res);
var title = res.subjects[0].title;
var img = res.subjects[0].images.small
$("img").attr("src",img);
$("p").html(title);
},"jsonp");
```
### vue請求
>請求方式一樣 設置數據不同
```
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
```
- vue注意項 1. 圖片地址渲染 `:src="img"`
- 2.設置數據到data里 `this.img` = res.subjects[0]
.images.small,
- 3 . beforeCreate() 進入觸發
```
<div id="app">
{{title}}
<img :src="img" alt="">
</div>
*****
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "helloworld",
img: "",
title: "",
},
*****
beforeCreate() {
var url = "https://douban.uieee.com/v2/movie/top250";
$.get(url, res => {
var data = res.subjects[0]
this.img = data.images.small,
this.title = data.title
})
},
})
</script>
```
### React請求數據
- 注意事項：
> 1.設置數據
> this.setState(()=>{ return {title,url} })
> 2.取數據 `{this.state.title}`
```
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
```
```
<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component{
constructor(props){
super(props);
this.state ={
msg:"hello world",
title:"",
img:""
};
}
*****
render() {
return (
<div>
<h1>{this.state.title}</h1>
<img src={this.state.url} />
</div>
);
}
*****
componentDidMount(){
var url = "https://douban.uieee.com/v2/movie/top250";
$.get(url,res=>{
this.setState(()=>{
return{
title,url
}
})
},"jsonp")
}
}
*****
ReactDOM.render(
<Clock />,
document.getElementById("example")
)
</script>
```
