P2-26js-jquery版的ajax请求和JSONP请求

jquery版的ajax请求和JSONP请求

jquery版的ajax请求

//原生ajax
let http = new XMLHttpRequest();
http.open('get',"http://10.35.161.142/dataOrigin.php?name=王大伟");
http.send()
http.onreadystatechange = function(){
	if(http.readyState === 4){
		console.log(http.responseText)
    }
}

//jQuery Ajax get版和post版
$.get("http://10.35.161.142/dataOrigin.php?name=你好",data => {
console.log(data)
})
$.post("http://10.35.161.142/dataOrigin.php?name=你好",data => {
console.log(data)
})

//代替上面两种
$("#query").click(function(){
	$.ajax({
		// 请求方式
		method:"get",
		url:"http://10.35.161.142/dataOrisdfdfgin.php",
		// 请求参数
		data:{
			name:$("#name").val(),
			age:18
		},
		// 请求成功后触发的回调函数
		success(data){
			console.log(data)
		},
		// 请求失败后触发的回调函数
		error(message){
			console.log("失败啦~")
		},
		// 同步/异步
		async:true,//false
		// 请求发送之前触发的钩子函数
		beforeSend(xhr){
			// console.log(xhr)
		},
		//缓存(默认为true),dataType为script或jsonp时默认为false,设置为false时将不缓存页面
		cache:true,
		// HTTP请求结果接收到之后触发的回调
		//无论成功失败都会返回的回调函数，一般不用 
		complete:function(a,b){
			console.log(a.responseText)
		},
	})
})

jquery版JSONP请求

//使用ajax方法发送jsonp请求
	$.ajax({
		url:"http://xxx.xxx.xxx/xx",
		dataType:"jsonp",
		success(data){
			console.log(data)
		}
	})
//例
$("#name").keyup(function(){
	$.ajax({
		// 请求方式
		// url:"http://10.35.161.142/data.php",
		url:"http://suggestion.baidu.com/su",
		//请求参数
		data:{
			wd:$("#name").val()
		},
		//方法
		dataType:"jsonp",
		//修改jsonp请求中带有函数名参数的名字（一般默认是callback） 改参数
		jsonp:"cb",
		//修改回调函数的函数名
		jsonpCallback:"xiaowang",
		//成功后返回
		success(data){
			$("#list").html("")
			data.s.forEach(item=>{
				$("#list").append($("<li></li>").html(item))
			})
		}	
	})
})