AJAX的一個簡單實例，跨域的解決，使用JQuery來進行ajax的調用

1.什麼是AJAX

ajax（Asynchronous Javascript And XML），中文名爲異步的js和xml。可以在不刷新網頁的情況下與後臺服務器進行通訊，加強用戶的體驗感。是目前廣泛使用的前端技術，下面將用原生js和JQuery來介紹一個簡單的ajax實例。

2.一個簡單的AJAX實例

get請求

// 採用原生的js代碼（get請求）
//1.實例化XMLHttpRequest對象
var request = new XMLHttpRequest(); 
//2.調用open方法，第一個參數爲請求方式（get、post），第二個參數爲請求地址，第三個參數爲異步或者同步
 request.open("GET", "請求url"，true);
 //3.發送請求
 request.send();
 //4.監聽服務器響應數據
 request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    console.log(request.responseText);//打印服務器響應的數據
                }else {
                    alert("錯誤");
                }
            }
        }

post請求,注意post請求必須添加響應頭

// 採用原生的js代碼（post請求）
//1.實例化XMLHttpRequest對象
var request = new XMLHttpRequest(); 
//2.調用open方法，第一個參數爲請求方式（get、post），第二個參數爲請求地址，第三個參數爲異步或者同步
 request.open("POST", "請求url"，true);
 //3.準備數據
 var data = ['key' = 'value'];
 //4.設置響應頭,注意post請求必須添加響應頭
 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 //5.發送請求
 request.send(data);
 //6.監聽服務器響應數據
 request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    console.log(request.responseText);//打印服務器響應的數據
                }else {
                    alert("錯誤");
                }
            }
        }

3.採用JQuery內置的方法來調用ajax

get請求

//JQuery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>//引入jq庫
$.ajax({ 
	type: "GET", 	
	url: "請求url",
	dataType: "json",
	success: function(data) {
		//請求成功後回調函數
	},
	error: function(jqXHR){     
		//請求失敗後回調函數
	},     
});

post請求

//JQuery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>//引入jq庫
$.ajax({ 
	type: "POST", 	
	url: "請求url",
	data:{
		key:value
	},
	dataType: "json",
	success: function(data) {
		//請求成功後回調函數
	},
	error: function(jqXHR){     
		//請求失敗後回調函數
	},     
});

4.解決跨域問題

http://www.abc.com:8080/index.php

協議.二級域名.域名:端口號/目標腳本文件

跨域是用ajax異步請求時經常遇到的問題,只要協議、域名、端口號其中一個不同，就產生了跨域訪問，解決的方法很簡單，建議利用XHR2方法，在後臺進行操作從而實現跨域支持IE9以上在服務器設置以下2個請求頭就可以解決：

header('Access-Control-Allow-Origin:*'); //*爲支持所有地址跨域，可以改爲只允許特定地地址跨域
header('Access-Control-Allow-Methods:POST,GET');//POST、GET爲允許的請求方式

喜歡冷月的話不妨給本文點一個贊，獲取更多面試筆記、編程技巧或開源代碼，請關注冷月的公衆號：學長冷月