Ajax学习笔记

//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO EXPRESS');
});
app.post('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO AJAX POST');
});
//监听端口启动服务
app.listen(8360,()=>{
    console.log('服务已经启动，8360端口监听中。。。');
})

//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化，设置请求方法和url
xhr.open('GET','http://127.0.0.1:8360/server');
//3.发送请求
xhr.send();
//4.事件绑定，处理服务端返回的结果
xhr.onreadystatechange = function(){
    //readyState是xhr对象中的属性，表示状态0 1 2 3 4 
    //等于4表示服务端返回了所有的结果
	if(xhr.readyState === 4){
        //判断响应状态码，2开头都表示成功
		if(xhr.status>=200 && xhr.status<300){
            //处理响应结果
			console.log(xhr.status);//状态码
			console.log(xhr.statusText);//响应状态字符串
			console.log(xhr.getAllResponseHeaders);//响应头（所有的）
			console.log(xhr.response);//响应体
		}
	}
}

const xhr = new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:8360/error-server');
//超时设置2s
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
    alert("网络异常，请稍后重试！");
}
//网络异常回调
xhr.onerror = function(){
    alert("你的网络似乎出现了一些问题！");
}
xhr.send();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
		if(xhr.status>=200 && xhr.status<300){
			console.log(xhr.response);
		}
	}
}

xhr.abord();

var btn = document.getElementById('btn');
let xhr = null;
//标识是否放松ajax请求
let isSending = false;
btn.onclick = function(){
     if(isSending) xhr.abord();
     xhr = new XMLHttpRequest();
     //修改标识变量的值
     isSending = true;
     xhr.open('GET','http://127.0.0.1:8360/delay');
     xhr.send();
     xhr.onreadystatechange = function(){
          if(xhr.readyState === 4){
          //标识修改变量
          isSending = false;
          }
     }
}

$.get(url,[data],[callback],[type]);
//这里get可以使用post，就是指get请求和post请求
//url：请求的url地址
//data：请求携带的参数
//callback：载入成功时的回调函数
//type：设置返回内容格式，有html、xml、script、json、text、default

$('button').eq(0).click(function(){
     $.get(//请求方式
     'http://127.0.0.1:8360/jquery-server',//请求地址
     {admin:admin,passwrod:admin},//传入的参数
      function(data){//回调函数，这里参数data即响应体
          console.log(data);
      },
      'json');//返回内容格式
});

$.ajax({
    //url地址
    url:'http://127.0.0.1/8360/jquery-server',
    //传递的参数
    data:{admin:admin,password:admin},
    //请求类型
    type:'GET',
    //返回数据类型
    dataType:'json',
    //成功时的回调函数
    success: function(data){
        console.log(data);
    },
    //超时时间
    timeout:2000,
    //失败的回调
    error: function(){
        console.log('出错了');
    },
    //头信息
    headers:{
        a:400,
        b:600
    }
});

response.setHeader("Access-Control-Allow-Origin","*")
//这里的*可以替换为具体的域名表示对单个域名设置跨域允许
response.setHeader(""Access-Control-Allow-Origin","http://127.0.0.1:/cors-server")