[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>
```
