# ajax
## 1.一個完整的原生js ajax的步驟
#### 1.創建ajax核心對象
#### 2.與服務器建立連接
#### 3.客戶端發送請求
#### 4.服務器響應
*****
### 1.1get請求
~~~
var url = "xxx";
var xhr = new XMLHttpRequest();
xhr.open('get',url,true);
xhr.send();
xhr.onreadystatechange = function(){
// readystate值代表服務器響應的變化, status:以數字形式返回http的狀態碼
if(xhr.readyState == 4 && xhr.status == 200){
var txt = JSON.parse(xhr.responseText);
console.log(txt);
}
}
~~~
JSON.parse()方法將json對象解析為JavaScript對象。
JSON.stringify()將javascript的值,轉換為JSON字符串。
### 1.2post請求
Post方式要設置一個請求頭
~~~
<div id="test"></div>
<script>
var test = document.getElementById("test");
var xhr = new XMLHttpRequest();
xhr.open("post","xxx",true);
// 設置請求頭
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = JSON.parse(xhr.responseText);
test.innerHTML = data.data.content
}
}
</script>
~~~
## 2.Jquery ajax()請求
~~~
window.onload = function(){
$.ajax({
type:"get", //交互方式
url:"xxx", //可以是本地路徑 也可以是遠程接口地址
dataType:"json", //數據類型 如果是跨域的情況為jsonp
success:function(res){ //獲取|提交 數據 成功執行的函數
console.log(res);
},
error:function(xhr){//失敗執行的函數
document.body.innerHTML = xhr.status;
}
})
}
~~~
### 2.1$.get()
~~~
//$.get()語法
$.get(url,function(data,status){
//獲取的data是一個JS對象
}).fail(function(data){
console.log(data.status)
})
~~~
### 2.2$.post()
~~~
//$.post()語法
$.post(url,data,function(data,status){
}).fail(function(data){
console.log(data.status)
})
~~~
