jQuery-ajax系列用法及JSONP,跨域资源共享CORS

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);