前端开发学习之【AJAX】

1.概述

1.AJAX

AJAX全称为Asynchronous Javascript And XML (异步的JS和XML)。通过AJAX可以在浏览器中发送异步请求,最大的优势是不用刷新就能获取数据

优点:

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

缺点:

  • 没有浏览历史,不能回退;
  • 存在跨域问题;
  • SEO不友好(搜索引擎优化,爬虫爬不到)。

2.XML

XML可扩展标记语言,用来传输和存储数据。XML和HTML类似,但HTML中是预定于标签,而XML都是自定义标签。现在已经被JSON取代了。

3.跨域问题

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域。localhost和127.0.0.1虽然都指向本机,但也属于跨域。

跨域会阻止接口的请求,会阻止Dom的操作。

4.HTTP协议

HTTP(hypetext transport protovol)协议,超文本传输协议,规定了浏览器与万维网服务器之间互相通信的规则。

请求报文

  • 行:请求方式、URL路径、HTTP协议版本
  • 头:Host、Cookie、Content-type、User-Agent
  • 空行

响应报文

  • 行:协议版本、响应状态码、响应状态字符串
  • 头:Content-Type、Content-length、Content-encoding
  • 空行
  • 体:html源码

5.环境准备

下载node.js 和express:操作链接

2.使用

1.请求基本操作

//获取元素
const btn=document.getElementByTagName('button')[0];
//绑定事件
btn.onclick=function(){
    
    
	//1.创建对象
	const xhr=new XMLHttpRequest();
	//2.初始化 设置请求方法和url
	xhr.open('GET','http://127.0.0.1:8000/路径');
	//3.发送
	xhr.send();
	//4.事件绑定 处理服务器端返回结果
	//readystate 是xhr对象中的属性,表示状态0 1 2 3 4
	//0 未初始化 1 open调用完毕 2 send调用完毕 3 服务器返回部分结果 4 返回所有结果
	xhr.onreadystatechange=function(){
    
    
		if(xhr.readystate===4){
    
    
			if(xhr.status>=200&&xhr.status<300){
    
    
				result.innerHTML=xhr.response;
			}
		}
	}
}

2.设置参数

在url中之间设置。

3.发送POST请求

xhr.open('POST','http://127.0.0.1:8000/路径+参数');
//设置请求头
xhr.setRequestHeader('type','content');
//设置请求体
xhr.send('请求体');

4.响应JSON数据

服务器端发送

const data={
    
    name:'hh'};
let str=JSON.stringify(data);
response.send(str);

客户端接收

//手动转换
let data=JSON.parse(xhr.response);
console.log(data.name);
//自动转换
console.log(xhr.response.name);

5.请求超时问题

//1. 2s内未收到结果就取消
xhr.timeout=2000;
//2. 设置超时回调,超时后调用该函数
xhr.ontimeout=function(){
    
    }

//网络异常回调
xhr.onerror=function(){
    
    }

6.取消请求

xhr.abort();

7.请求重复发送问题

//标识是否正在发送ajax请求
let isSending=false;

//发送后将isSending 改为true

//绑定事件
xhr.onreadystatechange=function(){
    
    
	if(xhr.readyState===4){
    
    
		isSending=false;
	}		
}

8.使用fetch函数发送ajax请求

fetch('url',{
    
    
	method:'POST',
	//请求头
	headers:{
    
    
		name:'ahh'
	},
	//请求体
	body:''
}).then(response=>{
    
    
	return response.text();//response.json();
});

3.jQuery中使用ajax

1.get请求

$.get(url,[data],[callback],[type])

  • url:请求的url地址
  • data:携带的参数
  • callback:载入成功时的回调函数
  • type:设置返回内容格式

2.post请求

$.post(url,[data],[callback],[type])

  • url:请求的url地址
  • data:携带的参数
  • callback:载入成功时的回调函数
  • type:设置返回内容格式

3.通用模式

$('button').eq(0).click(function(){
    
    
	$.ajax({
    
    
		url:'',
		data:{
    
    a:100,b:200},
		type:'GET'  //'POST',
		dataType:'json',
		success:function(data){
    
    },
		timeout:2000,
		error:function(){
    
    }
	})
})

4.axios使用ajax

5.跨域问题

1.同源策略

浏览器的一种安全策略,同源:协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

2.如何解决跨域

  1. JSONP:只支持get请求。

有些标签具有跨域能力,img、link、iframe、script,JSONP就是使用script标签的跨域能力来发送请求的。
script发送请求应该返回js语句

jQuery发送jsonp请求

$('button').eq(0).click(function(){
    
    
	$.getJSON('url',function(data){
    
    })
})
  1. CORS:跨域资源共享

不需要在客户端做任何特殊操作,完全在服务器中进行处理,支持get和post请求。

CORS通过设置一个响应头来告诉浏览器,该请求允许跨域。

response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Header","*");
response.setHeader("Access-Control-Allow-Method","*");
//*:全部
// 也可以写一个具体的url地址。

猜你喜欢

转载自blog.csdn.net/qq_46056318/article/details/127382926
今日推荐