Ajax

什么是Ajax：一种不用刷新整个页面便可与服务器通讯的技术

1. XMLHttpRequest

open(method,url,async)

send(string) --使用GET请求时，string会拼接在url中，所以用send(null).

　　　　　  --使用POST请求时，一般填写具体值。　

var xhr = new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4&&xhr.status==200){//响应内容解析完成，客户端可以调用
      console.log(xhr.requestText)
  }
}
xhr.send(null)

2. 状态码

3. 跨域

什么是跨域 

• 浏览器有同源策略，不允许ajax访问其它域接口
• 跨域条件：协议、域名、端口，有一个不同即为跨域

可以跨域的标签

• <img src=xxx>
• <link href=xxx>
• <script src=xxx>

跨域的几种方式 

1. JSONP

实现原理

• 加载 http://myname.y.com/embrace.html
• 不一定服务器真正有一个embrace.html文件
• 服务器可以根据请求，动态生成一个文件，返回

同理，你要跨域访问某网站的接口 

• 该网站给你一个地址http://someone.xx.com/api.js
• 返回内容格式如 callback({id:1,name:'xx'})内容可动态生成

<script>
window.callback = function(data){
  //这是我们得到的跨域信息
  console.log(data)
}
<script src="http://someone.xx.com/api.js">
//以上将返回 callback（{...}）,然后被浏览器调用

2. 服务器端设置 http header

header("Access-Control-Allow-Origin:*")

header("Access-Control-Allow-Method:GET,POST")

4. jquery实现Ajax

jQuery.ajax([setting])

• type:类型，"GET" OR "POST"
• url:请求地址
• data:一个对象，连同请求发送到服务器的数据
• dataType:预期服务器返回的类型，默认会自动根据HTTP包MIME信息来智能判断，一般采用json格式，即设置为“json”
• success:请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
• error:请求失败时调用此函数。传入XMLHttpRequest对象。

jquery实现jsonp  --仅限于GET请求

dataType:"jsonp"

jsonp:"callback"

 

转载于:https://www.cnblogs.com/embrace-ly/p/10800542.html