ajax续

我们可以修改请求的那些内容

MAIN.JS

  request.open('post','/xxx')  //第一部分设置
  request.setRequestHeader('wodefa','919')  // 第二部分设置
  request.setRequestHeader('Content-Type','x-www-form-urlencoden')
  // 第三部分是个空格不用设置			
  request.send('ooooooo')	  //第四部分

下面这张图可以验证 设置成功的信息

也可以获取响应的四部分

console.log(request.getAllResponseHeaders()) //响应的请求头

	console.log(request.getAllResponseHeaders()) //获取所有的
	console.log(request.status)  //获取响应状态码
	console.log(request.statusText)		//获取那个oK
	console.log(request.getResponseHeader('Content-Type'))  // 获取 第二部分
	console.log(request.responseText)  //获取第四部分

封装jQuery.ajax

main.js

window.jQuery=function(){ }  //造一个Jquery 函数  然后下面添加 ajax属性


window.jQuery.ajax =function(url,method,body,successFn,failFn){
	let request= new XMLHttpRequest()
	request.open(method,url)  
	request.onreadystatechange = ()=>{
		if (request.readyState===4) {
			if(request.status>=200 && request.status<=300){
				successFn.call(undefined, request.responseText)
			}else if(request.status>=400){
				failFn.call(undefined,request)
			}
		}
	}
	request.send(body)	  //第四部分
}
	
window.$=window.jQuery
myButton.addEventListener('click',(e) => {
	window.jQuery.ajax('/xxx','post','a=1&&b=2',(responseText)=>{console.log(1)},(request)=>{console.log(2)})
})

这算升级了？

window.jQuery=function(){ }  //造一个Jquery 函数  然后下面添加 ajax属性


window.jQuery.ajax =function(options){
	let url=options.url
	let method=options.method
	let body=options.body
	let successFn=options.successFn
	let failFn=options.failFn
	
	let request= new XMLHttpRequest()
	request.open(method,url)  
	request.onreadystatechange = ()=>{
		if (request.readyState===4) {
			if(request.status>=200 && request.status<=300){
				successFn.call(undefined, request.responseText)
			}else if(request.status>=400){
				failFn.call(undefined,request)
			}
		}
	}
	request.send(body)	  //第四部分
}
	
window.$=window.jQuery
myButton.addEventListener('click',(e) => {
	let obj={
		url: '/xxx',
		method: 'post',
		body: ' a=1&&b==1',
		successFn: ()=>{},
		failFn:()=>{}
	}
	window.jQuery.ajax(obj)
})

在升级？

window.jQuery=function(){ }  //造一个Jquery 函数  然后下面添加 ajax属性


window.jQuery.ajax =function(options){
	let url=options.url
	let method=options.method
	let body=options.body
	let successFn=options.successFn
	let failFn=options.failFn
	let headers=options.headers
	
	let request= new XMLHttpRequest()
	request.open(method,url)  
	for (let key in headers) {
		let value = headers[key]
		request.setRequestHeader(key,value)
	}
	request.onreadystatechange = ()=>{
		if (request.readyState===4) {
			if(request.status>=200 && request.status<=300){
				successFn.call(undefined, request.responseText)
			}else if(request.status>=400){
				failFn.call(undefined,request)
			}
		}
	}
	request.send(body)	  //第四部分
}
function f1(responseText){}
function f2(responseText){}

myButton.addEventListener('click',(e) => {
	
	window.jQuery.ajax({
		url: '/xxx',
		method: 'post',
		headers:{
			'Content-Type': 'text/javascript;charset=utf-8',
				'jack':'99'
		},
		body: ' a=1&&b==1',
		successFn: (x)=>{
			//加入要传连个函数
			f1.call(undefined,x)
			f2.call(undefined,x)
		},
		failFn:(x)=>{
			console.log(2)
		}
	})
})

解构

window.jQuery=function(){ }  //造一个Jquery 函数  然后下面添加 ajax属性


window.jQuery.ajax =function({url,method, body, successFn,failFn,headers}){  //  直接从第一个参数解构 同时 直接声明（let）
//	let url
	// 如何接收两种参数
//	if(arguments.length===1){
//		url=options.url	
//	}else if(arguments.length===2){
//		url=arguments[0]
//		options=arguments[1]
//	}
	
	
//	let method=options.method
//	let body=options.body
//	let successFn=options.successFn
//	let failFn=options.failFn
//	let headers=options.headers
	
//ES6
//	let {url,method, body, successFn,failFn,headers}=options
	
	let request= new XMLHttpRequest()
	request.open(method,url)  
	for (let key in headers) {
		let value = headers[key]
		request.setRequestHeader(key,value)
	}
	request.onreadystatechange = ()=>{
		if (request.readyState===4) {
			if(request.status>=200 && request.status<=300){
				successFn.call(undefined, request.responseText)
			}else if(request.status>=400){
				failFn.call(undefined,request)
			}
		}
	}
	request.send(body)	  //第四部分
}
function f1(responseText){}
function f2(responseText){}

myButton.addEventListener('click',(e) => {
	
	window.jQuery.ajax({
		url: '/xxx',
		method: 'post',
		headers:{
			'Content-Type': 'text/javascript;charset=utf-8',
				'jack':'99'
		},
		body: ' a=1&&b==1',
		successFn: (x)=>{
			//加入要传连个函数
			f1.call(undefined,x)
			f2.call(undefined,x)
		},
		failFn:(x)=>{
			console.log(2)
		}
	})
})