ajax学习笔记

赴梦、

于 2021-05-25 15:34:34 发布

阅读量107

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_50233101/article/details/117093153

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 原生ajax

1.1 XML简介

XML，可扩展标记语言，被用来设计和存储数据
与html不同的时，其标签都是自定义的标签
例如：

//表示一个学生数据：name="孙悟空";age="18";gender="男";

<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>

但是现在被JSON所代替

1.2 ajax特点

1.2.1 优点

可以无需页面刷新与服务器进行通信
允许你根据用户事件来更新部分页面内容

1.2.2 缺点

没有浏览历史
存在跨域问题（同源）
SEO不友好（爬虫）

2. HTTP各部分结构

客户端或者浏览器向服务器发送相关信息称为HTTP请求，其内容为请求体，Request
服务器向客户端或者浏览器传回内容称为HTTP响应，其内容称为响应体，Response

2.1 HTTP请求

请求报文

行：POST /?ie=utf-8 HTTP/1.1
头：HOST：baidu
Cookie:name=gui
Content-type:application/x-www-form-urlencoded
空行
体：username=admin&passon=123

2.2 HTTP响应

响应报文

行：HTTP/1.1 200 OK
头：Content-type:text/html;charset=utf-8
Content-length:2048
Content-encoding:gzip
空行
体：（得到的回应内容，比如JSON字符串等等）

3. 原生的AJAX写法

3.1 ajax小例子（向服务端发送请求，请求的基本操作）

//定义一个按钮来发送请求
<button>点击发送请求</button>

//将得到的请求放在一个div容器内
<div id="result" style="width:200px;height:200px;border:soild 1px #90b"></div>

//开始写ajax代码
<script>
//获取对象
var button=document.getElementByTagName('button')[0];
var div=document.getElementById('result');
//定义点击事件
button.onclick=function(){
//1.创建对象
var xhr=new XMLHttpRequest();
//2. 初始化，设置请求方法和对呀的url(向服务器请求的地址)
xhr.open('GET','http://127.0.0.1:8000/server');
};
//3. 发送
xhr.send();
//4. 事件绑定 处理服务器返回的结果
//onreadystatechange()方法
//解释此单词：
// on..when :当...的时候
// readystate: 是xhr中对象的属性，表示状态0 1 2 3 4
//各状态表示的含义：
// 0=>未初始化，一开始readystate就是0
// 1=>表示open方法已经调用完毕
// 2=>表示send方法已经调用完毕
// 3=>表示服务端返回了一些相应的结果
// 4=>表示服务端返回了所有的结果
//change 改变的时候触发
xhr.onreadystatechange=function(){
//判断
//当服务端返回所有结果时候，才返回全部响应的值，此时readystate是4
if(xhr.readystate===4){
	//判断响应的状态码  200 404 403 500 之类的
	//2开头都表示成功
	if(xhr.status>=200&&xhr.status<300){
		//处理结果 行 头 体 空行 体
		//1.响应行
		console.log(xhr.status);//状态码
		console.log(xhr.statusText);//状态字符串
		//2.响应头
		console.log(xhr.getAllResponseHeaders(){});//所有响应头
		//3.响应体
		console.log(xhr.response);//响应体

		//将响应体放在div盒子里显示
		div.innerHtml=xhr.response;
	}else {
		
		}
  }
}

</script>

3.2 如何设置ajaz请求Url的参数

在open()方法里的对应url里设置
举例：在url里添加参数：a=100和b=200,c=300

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
};

在浏览器里看该参数：

3.3 ajax发送POST请求

小例子：
鼠标移动到div里，就会发送一次POST请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        var result=document.getElementById('result');
        //绑定事件
        result.addEventListener('mouseover',function(){
            //1.创建对象
            var xhr=new XMLHttpRequest();
            //2.初始化，设置类型与URL
            xhr.open('post','http://127.0.0.1:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定
            xhr.onreadystatechange=function(){
                //判断
                if (xhr.readyState===4) {
                    if (xhr.status>=200&&xhr.status<300) {
                        result.innerHTML=xhr.response;
                    }
                    
                }
            }
            });
    </script>
</body>
</html>

3.4 ajaz设置请求体

在send()方法里放置，有很多格式的，最常用的是JSON格式，重要的是服务端有相应的解析
其中，一个请求头为：
Content-Type是设置请求头内容的类型的
比如：

xhr.send('a=100&b=200');
//或者
xhr.send('a：100&b：200');

3.5 ajax设置请求头信息

xhr.setRequestHeader('Content-Type','application/json');

3.6 ajax服务端响应Json数据

1.将对象转化为Json类型的字符串

//定义一个需要转化成json类型的对象
var data={name:'xx'};
//转化为json类型
var j=JSON.stringify(data);

2.将Json类型的字符串转化成一个对象(方法转化或者借助一个响应体自动转换json成对象)

//方法转换
var j={'name':'xx'};
var date=JSON.parse(j);
//然后就可以点出里面的属性了
console.log(date.name);


//借助响应体转换
//设置响应体的类型
xhr.responseType='json';

3.7 ajaz请求超时与网络异常处理

在实际开发项目中，很容易出现服务器响应慢或者网络异常，应该怎么处理呢？

//设置服务器超时2s客户端就自动停止请求响应（时间到了之后自动的取消了请求）
xhr.timeout=2000;

//超时回调
xhr.ontimeout=function(){
	alert('请求超时，请稍后再试');
};

//网络异常问题
xhr.onerror=function(){
	alert('你的网络似乎出了些问题');
};

3.8 ajaz取消请求

手动的取消请求

<button>点击发送</button>
<button>点击取消</button>

<script>
//获取元素对象
var btns=document.querySelectorAll('button');
let x=null;

btn[0].onclick=function(){
	x=new XMLHttpRequest();
	x.open('Get','http://127.0.0.1:80/server');
	x.send();
};

//abort(取消发送)
btn[1].onclick=function(){
	x.abort();
}
</script>

3.9 ajaz请求重复发送问题

利用一个标识符来判断

var btns=document.querySelectorAll('button');
let x=null;
var isSending=false;

btn[0].onclick=function(){
	if(isSending){x.abort();}//如果正在发送则取消正在发送的请求，创建一个新的请求
	x=new XMLHttpRequest();
	isSending=true;
	x.open('Get','http://127.0.0.1:80/server');
	x.send();
	x.onreadystatechange=function(){
		if(x.readystate===4){
			//修改标识变量
			isSending=false;
		}
	}
};

4. JQuary发送ajax写法

通用写法：

<button id="button"></button>
    <script>
        $('button').click(function(){
            $.ajax({
                //url
                url:'http://127.0.0.1:8000',

                //请求的参数
                data:{"a":100,"b":200},

                //请求类型
                type:'GET',

                //响应体结果
                dataType:'json',

                //成功的回调
                success:function(date){
                    alert(date);//date是服务器返回的结果
                },

                //超时时间，超出2s就终止请求
                timeout:2000,

                //失败的回调
                error:function(){
                    alert("出错了")
                }


            })
        });
    </script>

5. Axios发送ajax写法

get写法

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post写法

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

通常写法

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});