一.前言
本文將從下面幾個方面來了解AJAX的使用方法
- GET和POST請求
- JSON
- AJAX流程
- jQuery中的AJAX
- 處理跨域問題
二.GET和POST請求
想學(xué)習(xí)AJAX，就必須先了解GET請求和POST請求牢硅。
GET與POST的區(qū)別
- GET請求的數(shù)據(jù)會附在URL之后蜓氨。
- GET請求數(shù)據(jù)有大小限制，POST不限制大小肛度。
- GET的安全性要比POST的安全性低。
GET請求
這里使用form表單來進(jìn)行提交
- html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- 要向服務(wù)器發(fā)送數(shù)據(jù)必須使用form表單，使用get方法-->
<form action="get.php" method="get">
<!-- 使用name來傳遞數(shù)據(jù) -->
<input type="text" name="user" />
<!-- 數(shù)據(jù)提交 -->
<input type="submit" value="發(fā)送請求" />
</form>
</body>
</html>
- php代碼
<?php
//使用utf8編碼格式（如不設(shè)置怖侦，輸入中文時教藻，瀏覽器將無法正確解析中文）
header('Content-type:text/html;charset=utf8');
// 使用$_GET獲取數(shù)據(jù)
echo "hello $_GET[user]";
?>
POST請求
POST請求與GET請求的用法基本相同
- html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- 要向服務(wù)器發(fā)送數(shù)據(jù)必須使用form表單矩距，使用post方法 -->
<form action="post.php" method="post">
<!-- 使用name來傳遞數(shù)據(jù) -->
<input type="text" name="user" />
<!-- 數(shù)據(jù)提交 -->
<input type="submit" value="發(fā)送請求" />
</form>
</body>
</html>
- php代碼
<?php
//使用utf8編碼格式（如不設(shè)置，輸入中文時怖竭，瀏覽器將無法正確解析中文）
header('Content-type:text/html;charset=utf8');
// 使用$_POST獲取數(shù)據(jù)
echo "hello $_POST[user]";
?>
三.JSON
JSON語法規(guī)則
- 書寫格式
名稱 : 值
"user":"yimi" - JSON值與對于的符號
- 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
- 字符串（在雙引號中）
- 邏輯值（true 或 false）
- 數(shù)組（在方括號中）
- 對象（在花括號中）
- null
- JSON對象
對象中可以包含多個名稱和值 ---- {在花括號中寫}
{ "user":"yimi" , "password":"123" } - JSON數(shù)組
JSON 數(shù)組可包含多個對象 ---- [在方括號中書寫]
{
"students": [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
]
}
- 通過JS賦值
var students = [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
];
JSON使用
前面做了那么多的鋪墊锥债，就是下面的兩個方法，這是JSON中很重要的方法痊臭，特別是在數(shù)據(jù)傳遞的時候哮肚，這兩個方法經(jīng)常被使用。
- 將字符串轉(zhuǎn)換成JSON對象
var obj = JSON.parse(jsonstr); - 將JSON對象轉(zhuǎn)換成字符串
var str = JSON.stringify(jsonobj);
四.AJAX流程
AJAX用于實現(xiàn)異步加載
AJAX使用流程及記憶方法
此記憶方法可能不算好广匙，如果覺得不適合你允趟，可以另外重新想一個。
-
new XMLHttpRequest();--- 收到一個新的快遞 -
open('Methor',url,true)--- 你迫不及待地打開 -
send();--- 發(fā)現(xiàn)你的東西有問題鸦致，就給送回去了 -
function onload(){}--- 賣家處理你的快遞 -
responseText--- 處理后潮剪，再把快遞給你返回來
GET請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//創(chuàng)建一個ajax對象
var xhr = new XMLHttpRequest();
//第一個參數(shù)：采用post/get形式請求
//第二個參數(shù)：選擇要連接的網(wǎng)址
//第三個參數(shù)：是否發(fā)起異步請求，一般為true分唾，也可以不寫抗碰，默認(rèn)為true。
xhr = open('GET','ajax.php',true);
//將數(shù)據(jù)發(fā)送給服務(wù)器（GET請求一般為null）
xhr = send(null);
//ajax請求成功后的回調(diào)
xhr.onload = function(){
//服務(wù)器返回的數(shù)據(jù),請求之前為空
console.log(xhr.responseText);
}
</script>
</body>
</html>
POST請求
<script type="text/javascript">
//創(chuàng)建一個ajax對象
var xhr = new XMLHttpRequest();
//第一個參數(shù)：采用post/get形式請求
//第二個參數(shù)：選擇要連接的網(wǎng)址
//第三個參數(shù)：是否發(fā)起異步請求绽乔，一般為true弧蝇，也可以不寫，默認(rèn)為true。
xhr = open('POST','ajax.php',true);
//設(shè)置Content-Type,以告知服務(wù)器實體中有參數(shù)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//將數(shù)據(jù)發(fā)送給服務(wù)器（括號里面為你要傳遞到服務(wù)器的數(shù)據(jù)）
xhr = send("user="+username);
//ajax請求成功后的回調(diào)
xhr.onload = function(){
//服務(wù)器返回的數(shù)據(jù),請求之前為空
console.log(xhr.responseText);
}
</script>
文件上傳
<body>
<!-- 設(shè)置 enctype="multipart/form-data" -->
<form id="regForm" enctype="multipart/form-data">
<input type="text" name="user"/><br />
<input type="password" name="pwd"/><br />
<a class="upload">
<input type="file" name="icon"/>
</a>
<input type="button" onclick="reg()" value="立即注冊" />
</form>
<script type="text/javascript">
function reg(){
var regForm = document.getElementById('regForm');
var formData = new FormData(regForm);
var reg_api = 'reg.php' ;
var xhr = new XMLHttpRequest();
xhr.open('POST',reg_api,true);
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');不需要設(shè)置Content-Type
xhr.send(formData);
xhr.onload = function(){
//json字符串
var jsonStr = xhr.responseText;
//將json字符串轉(zhuǎn)換為json對象
var obj = JSON.parse(jsonStr);
alert(obj.message);
}
}
</script>
</body>
五.jQuery中的AJAX
jQuery中的GET方法
- HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="btn">發(fā)送一個ajax請求</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function(event) {
//第一個參數(shù):要鏈接的網(wǎng)址
//第二個參數(shù)：要發(fā)送的數(shù)據(jù)
//第三個參數(shù)：回調(diào)函數(shù)
$.get('jq_get.php',{'user':'yimi'}, function(data) {
$('#box').html(data);
});
});
</script>
</body>
</html>
- php代碼
<?php
var_dump($_GET);
?>
- 輸出結(jié)果
array (size=1)
'user'=>string'yimi'(length=4)
jQuery中的POST方法
- HTML主要代碼
<body>
<button id="btn">發(fā)送一個ajax請求</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function(event) {
//第一個參數(shù):要鏈接的網(wǎng)址
//第二個參數(shù)：要發(fā)送的數(shù)據(jù)
//第三個參數(shù)：回調(diào)函數(shù)
$.post('jq_post.php', {'user':'yimi','pwd':'123456'}, function(data) {
$('#box').html(data)
});
});
</script>
</body>
- php代碼
<?php
var_dump($_POST);
?>
- 輸出結(jié)果
array (size=2)
'user'=>string'yimi'(length=4)
'pwd'=>string'123456'(length=6)
jQuery中的JAJAX方法
- HTML主要代碼
<body>
<button id="btn">發(fā)送一個ajax請求</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function(event) {
$.ajax({
url: 'jq_ajax.php',//要鏈接的地址
type: 'POST',//請求可以是post看疗，也可以是get
dataType: 'html',//返回html數(shù)據(jù)
data: {'user': 'yimi','pwd':'123456'},//要發(fā)送的數(shù)據(jù)
})
//成功的回調(diào)函數(shù)
.done(function(data) {
console.log("success");
$('#box').html(data);
})
//失敗的回調(diào)函數(shù)
.fail(function() {
console.log("error");
})
//成功或失敗都會執(zhí)行的函數(shù)
.always(function() {
console.log("complete");
});
});
</script>
</body>
- php代碼
<?php
var_dump($_POST);
?>
- 輸出結(jié)果
array (size=2)
'user'=>string'yimi'(length=4)
'pwd'=>string'123456'(length=6)
六.處理跨域問題
利用XHR2的方法來實現(xiàn)跨域處理（ie10以下不支持）
只需在php代碼中加入以下代碼即可
header("Access-Control-Allow-Origin:*");//*號表示允許所有域訪問
header("Access-Control-Allow-Methods:POST,GET");//請求
By : Yimi-shan
