手写ajax究极版

手写AJAX

<script>
         function ajax({
             method=get,
             url='http://localhost:3000/get',
             data={
               name:'liuyang',
               age:666
              },
              header={
                    //'Content-Type': 'application/x-www-form-urlencoded'
                    'Content-Type': 'application/json'
				},
			   success=function (data) {
                   console.log(data); 
               },
			   error=function (data) {console.log(data);
               }
            }
         )
         {
        //把method全部提升为大写字符
         method=method.toLocaleUpperCase()
         console.log('提升大写',method);
         console.log(url);
         //创建ajax对象
         const xhr =new XMLHttpRequest()
         //拼接请求参数的变量
         let queryString='';
         //将query参数转化为urlencoded格式
         Object.keys(data).forEach(key=>{
             queryString +=`${key}=${data[key]}&`
         })
         //测试转换是否正确
         console.log('测试转换',queryString);
         //去除最后的&
         queryString = queryString.substr(0,queryString.length-1)
        //拼接到url上
        if( method =='GET'){
         url=url+'?'+queryString;
         console.log(url);
         
        }
         // 配置ajax对象
		xhr.open(method, url);
        // 如果请求方式为post
			if (method == 'POST') {
				// 用户希望的向服务器端传递的请求参数的类型
				var post_contentType = header['Content-Type'] //['Content-Type']
                // 设置请求参数格式的类型
                console.log(post_contentType);
				xhr.setRequestHeader('Content-Type', post_contentType);
				// 判断用户希望的请求参数格式的类型
				// 如果类型为json
				if (post_contentType == 'application/json') {
					// 向服务器端传递json数据格式的参数
					xhr.send(JSON.stringify(data))
				}else {
					// 向服务器端传递普通类型的请求参数
					xhr.send(queryString);
				} 

			}else {
                // 发送请求
                console.log(1);
                
                xhr.send();
                console.log('readuState',xhr.readyState);
            }
           
            
         // 监听xhr对象下面的onload事件
            // 当xhr对象接收完响应数据后触发
           //  xhr.onload  
           // =function(){}
           xhr.onreadystatechange = function () {
            let {status,statusText,responseText,response,readyState}=xhr
            if(readyState!==4){return}
            // 获取响应头中的数据
            let contentType = xhr.getResponseHeader('Content-Type');
            // 如果响应类型中包含applicaition/json
            if (contentType.includes('application/json')) {
            // 将json字符串转换为json对象
                response= JSON.parse(response)
            }  
            // 当http状态码等于200的时
            if (status == 200&& status<=299) {
                // 请求成功 调用处理成功情况的函数
                  success({
                    method,
                    data:response,
                    status,
                    statusText,
                    xhr,
                 }); 
                   
            }else {
                // 请求失败 调用处理失败情况的函数
                    error(new Error('请求失败了'));
                   }
            }     
  }
  ajax({method:'get',
        url:'http://localhost:5200/get',
        header:{'Content-Type': 'application/json'}
})  
    </script>

express服务代码

const express =require('express')
const cors =require('cors')
const bodyParser = require('body-parser')
 const app = express()
 app.use(cors())
 app.use(bodyParser.urlencoded({extended:true}))
 app.use(bodyParser.json())
 
 
 app.get('/get',(request,response)=>{
     console.log(request.query);
     
     setTimeout(() => {
        response.send({
            name:'月薪8000'
        }) 
     }, 1000+Math.random(2000));

 })
 app.post('/post',(request,response)=>{
          console.log(request.body.data);
           response.send({
                    data:{
                        name:'liuyang'
                    }
           }) 
          
           
 })
 app.listen('3000',()=>{
     console.log('3000端口已经启动',);
     
 })