jQuery-ajax

基本使用

	$.ajax({
			url:'json.php',
			//設定的是請求引數，二者沒關係
			data:{name:'張三',age:'18'},
			//用於設定響應體型別
			dataType:'json',
			type:'get', 
			success:function(res){
				console.log(res);
			}
		});

	$.ajax('time.php',{
			type:'post', //method  請求方法
			success:function (res) {
			//res 拿到的只是響應體
 

			console.log(res);		
			}
		})
		
	$.ajax({
			url:'time.php',
			type:'get', 
			//data是提交到服務端的引數，get用過url傳遞，
			//post就通過 請求體傳遞
			data: {id:1,name:'張三'},
			success:function(res){
				console.log(res);
			}
		});
		

		$.ajax({
			url:'json.php',
			type:'get', 
			success:function(res){
			//res 會自動根據服務端響應的 Content-Type 自動轉換為物件
 

			//這是jquery提供的功能 內部實現的
				console.log(res);
			}
		});

jquery-ajax-callback

	$.ajax({
		url:'time.php',
		type:'get',
		beforeSend:function (xhr) {
			//在所有傳送請求操作之前執行
			console.log('beforeSend',xhr)
		},
		//只有請求成功（狀態碼status200）才會執行這個函式
		success:function(res){
			//隱藏loading
			console.log(res);
		}
 
,
		error:function(xhr) {
		//只有請求不正常（狀態碼不為200）才會執行
		////隱藏loading
			console.log(xhr);
		},
		complete:function(xhr) {
			// 請求完成執行，不管成功還是失敗都是完成，都會執行
			console.log(xhr);
		}
	});

封裝用法

$.get('time.php',{id:'1'},function (res) {
			console.log(res);
		});



		$.post('time.php',{id:'2'},function (res) {
			console.log(res);
		})

		$.getJSON('json.php',{id:'1'},function (res) {
			console.log(res);
		});

jQuery-JSONP

$.ajax({
			url:'http://localhost/demo.php',
			dataType:'jsonp',
			success:function (res) {
				console.log(res);
			}
		});

CORS(跨域資源共享)：Cross Origin Resource Share

之前原本ajax是不支援跨域請求的，可以利用jQuery的jsonp實現或者自己封裝函式，其原理其實就是利用script標籤在服務端封裝js函式在客戶端實現呼叫這樣的方式來實現的，直至CORS的出現：

客戶端正常請求，需要服務端配合，存在某些相容性問題，推薦使用jQuery-JSONP的方式

客戶

 $.get('http://localhost/cors.php', {}, function (res) {
      console.log(res)
    })

服務

$conn = mysqli_connect('localhost', 'root', '123456', 'demo');

$query = mysqli_query($conn, 'select * from users');

while ($row = mysqli_fetch_assoc($query)) {
  $data[] = $row;
}

// 一行程式碼搞定
// 這裡規定了一個地址頭實現跨域，* 在這裡規定了所有地址都可以訪問
header('Access-Control-Allow-Origin: *');
//這裡的頭部規定製定地址進行跨域訪問
header('Content-Type: application/json');
echo json_encode($data);