Ajax基础学习笔记

最新推荐文章于 2024-06-10 22:18:41 发布

ZJia_X

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量158

点赞数

文章标签： javascript jquery ajax

本文链接：https://blog.csdn.net/ZJia_X/article/details/108932230

版权

一、Ajax运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

二、实现步骤

//1.创建Ajax对象
var xhr = new XMLHttpRequest();

//2.告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.baidu.com');

//3.发送请求
xhr.send();

//4.获取服务器端给予客户端的响应数据
xhr.onload = function(){
	console.log(xhr.responseText)
}

三、服务器端响应的数据格式

1、服务器端大多情况下以 JSON 对象作为响应数据的格式
2、在http请求与响应的过程中，请求参数 和 响应内容如果是对象类型，会被转换为对象字符串进行传输。

JSON.parse()	//将json字符串转换为json对象


xhr.onload = function(){
	var responseText = JSON.parse(xhr.responseText);	//将JSON字符串转换为JSON对象
	console.log(responseText);
	var str = '<p>' + responseText.name + '<p>';
	document.body.innerHTML = str;
}

四、请求参数传递

1、请求方式

//GET请求方式
xhr.open('get','http://www.baidu.com');

//POST请求方式
xhr.open('post','http://www.baidu.com');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')	//设置请求参数格式的类型（post请求必须要设置）
xhr.send('name=lisi&age=20');

xhr.open('post','http://www.baidu.com');
xhr.setRequestHeader('Content-Type','application/json')	//设置请求参数格式的类型（post请求必须要设置）
xhr.send(JSON.stringify({name: 'lisi', age: '20'}));	//JSON.stringify()将json对象转换为json字符串

2、请求参数的格式

//application/x-www-form-urlencoded
name=lisi&age=20&sex=男

//application/json
{name: 'lisi', age: '20', sex: '男'}

//get请求无法提交json对象数据格式，传统网站的表单提交也不支持

3、Ajax 状态码

0：请求未初始化（未调用open（））
1：请求已经建立，但是还没有发送（未调用send（））
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成

xhr.readyState	//获取Ajax状态码

//onreadyStatechange事件 （当Ajax状态码变化时将自动触发该事件）
xhr.onreadyStatechange = function(){
	//2：请求已经发送
	//3：请求正在处理中，通常响应中已经有部分数据可以用了
	//4：响应已经完成
	console.log(xhr.readyState);
	if(xhr.readyState == 4){	//对ajax状态码进行判断
		console.log(xhr.responseText);
	}
}

4、Ajax 错误处理

服务器端能接收到请求，但是返回的结果不是预期结果
判断服务器端返回的状态码，分别进行处理，xhr.status 获取http状态码

xhr.send();
xhr.onload = function(){
	console.log(xhr.responseText);
	if(xhr.status == 400){	//xhr.status 获取http状态码
		alert('请求出错')
	}
}

网络畅通，服务器端没有接收到请求，返回404状态码
检查请求地址是否错误
网络畅通，服务器端能接收到请求，返回500状态码
服务器端错误
网络中断，请求无法发送到服务器端
触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

xhr.onerror = function(){
	alert('网络中断，无法发送ajax请求')
}

5、低版本IE浏览器的缓存问题

在低版本的IE浏览器中，Ajax请求中有严重的缓存问题，在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果，即使服务器端的数据更新了，客户端拿到依然是缓存中的旧数据。

**解决方案：**在请求地址的后面添加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get','http://www.baidu.com?t=' + Math.random());	//?t=

6、Ajax 异步

同步
上一行代码执行完成后才执行下一行代码，代码逐行执行
异步
异步代码需要花费时间去执行，但程序不会等待异步代码执行完成后再执行后续代码，而是直接执行后续代码，然后再回头看异步代码是否执行完毕返回结果，如果返回结果再调用回调函数处理异步代码执行的结果

console.log('before');

setTimeout(()=>{
	console.log('last');
},2000);

console.log('after');

7、模板引擎

7.1、下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

<script src="./js/template-web.js"></script>

7.2、准备 art-template 模板

<script id="tq1" type="text/html">
	<div class="box"></div>
</script>

7.3、告诉模板引擎将哪一个模板与哪个数据进行拼接

var html = template('tp1',{username: 'lisi', age: '20'});

7.4、通过模板语法告诉模板引擎，数据和html字符串要如何拼接

<script id="tq1" type="text/html">
	<div class="box">{{username}}</div>
</script>

7.5、将拼接好的html字符串添加到页面中

document.getElementById('container').innerHTML = html;

8、FormData 对象

8.1、作用

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
异步上传二进制文件。

8.2、使用

准备HTML表单

<form id="form">
	<input type="text" name="username" />
	<input type="password" name="password" />
	<input type="button" />
</form>

将HTML表单转化为 formData 对象

var form = document.getElementById('form');
var formData = new FormData(form);

提交表单对象

xhr.send(formData);

获取表单对象中属性的值

formData.get('key');

console.log(formData.get('username'));

设置表单对象中属性的值

formData.set('key','value');

console.log(formData.set('username','itcast'));	//设置的表单属性存在，覆盖属性原有的值
console.log(formData.set('age',100));	//设置的表单属性不存在，会创建这个表单属性

删除表单对象中属性的值

formData.delete('key');

向表单对象中追加属性值

formData.append('key','value');	//设置的表单属性存在，两个值都保留

8.3、FormData 二进制文件上传

<input type="file" id="file"/>

<script type="text/javascript">
	var file = document.getElementById('file')

	file.onchange = function(){	//当用户选择文件时触发
		var formData = new FormData();	//创建空表对象
		formData.append('attrName',this.files[0]);	//将用户选择的二进制文件添加到表单对象中
		xhr.open('post','www.baidu.com');	//配置ajax对象，请求方式必须为post
		xhr.send(formData);
	}
</script>

9、同源政策

如果两个页面拥有相同的协议、域名和端口，那么它们属于同一个源，只要有一个不同就是不同源

http://www.baidu.com/dir/page.html
http://www.baidu.com/dir2/other.html 同源
http://baidu.com/dir/page.html 不同源（域名不同）
http://v2.www.baidu.com/dir/page.html 不同源（域名不同）
http://www.baidu.com:81/dir/page.html 不同源（端口不同）
https://www.baidu.com/dir/page.html 不同源（协议不同）

ZJia_X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础学习笔记

一、Ajax运行原理Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。二、实现步骤//1.创建Ajax对象var xhr = new XMLHttpRequest();//2.告诉Ajax请求地址以及请求方式xhr.open('get','http://www.baidu.com');//3.发送请求xhr.send();//4.获取服务器端给予客户端的响应数据xhr.onload = function(){
复制链接

扫一扫