Ajax学习笔记（简洁版）

最新推荐文章于 2025-03-18 21:04:07 发布

黑即是白

最新推荐文章于 2025-03-18 21:04:07 发布

阅读量476

点赞数 6

分类专栏：未分类文章标签： Ajax

本文链接：https://blog.csdn.net/qq_37802511/article/details/83624632

版权

未分类专栏收录该内容

2 篇文章

订阅专栏

HTTP协议请求&响应

网络传输协议

指服务器和客户端之间进行通信时的约束和规范，客户端与服务端的数据交互并不是杂乱无章的，需要按照一定的规范进行

常见协议

HTTP、 HTTPS超文本传输协议
FTP 文件传输协议
SMTP 简单邮件传输协议

HTTP协议

即超文本传输协议，网站数据是基于HTTP协议进行传输的的，例如图片，CSS，JS等
HTTP协议主要由请求和响应构成
请求Request／请求报文：请求由客户端发起，其规范格式为：请求行、请求头、请求体。

请求行 : POST /AJAX/HTTP/login.php HTTP/1.1
请求头: 把浏览器的信息告诉服务器

Host: site0.com                                          
Connection: keep-alive
Content-Length: 21
Cache-Control: max-age=0
Origin: http://site0.com
Upgrade-Insecure-Requests: 1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: http://site0.com/AJAX/HTTP/login.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

域名 Host:
浏览器信息User-Agent
当前浏览器可接受的编码 Accept-Encoding:
当前浏览器可识别的语言 Accept-Language:

请求体:GET请求看不到请求体，只有表单POST请求才能看到请求体 Form Data

响应Response／响应报文：

响应行(状态行) : HTTP/1.1 200 OK
200：ok ;403:forbiden ;404:not found
响应头 :把服务器的信息告诉浏览器

Date: Fri, 19 Oct 2018 08:55:05 GMT
Server: Apache/2.4.33 (Win64) PHP/7.2.7
X-Powered-By: PHP/7.2.7
Content-Length: 0
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

时间(0时区为准) Date:
服务器 Server:
返回内容的长度 Content-Length:
返回内容的类型 Content-Type:

响应体：Response

两种请求方式的区别
POST方式请求：有请求体，有Content-Type
GET方式请求：没有请求体和Content-Type

异步

AJAX(Asynchronous Javascript And XML) 本质上是在HTTP协议的基础上以一部的方式与服务器进行通信

异步：指某段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身书写顺序，相反则为同步。
优势在一不阻塞程序的执行，从而提高整体执行效率。

var xhr = new XMLHttpRequest()
// 设置了请求行
xhr.open('post','logon.php')
// 设置请求头
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')
// 设置请求体,
xhr.send(null)
// 接收服务器响应
xhr.onreadystatechange=function(){

}

XMLHttpRequest

XMLHttpRequest ：浏览器内置对象，用于在后台与服务器通信(交换数据)，由此可以实现页面部分更新，而不是刷新整个页面。

	var xhr = new XMLHttpRequest()
	// 设置了请求行(方法，地址)
	xhr.open('post','login.php')
	// 设置请求头(键值对设置'','')
	xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')
	// 设置请求体,请注意键值对的格式用&分隔。get方式一般为空或null
	xhr.send(name=itcase&age=10)  //xhr.send(null)   方式不用传值
	// 接收服务器响应
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			//console.log();
			
			// 通过DOM操作将响应内容放到页面上
			//document.querySelector("#username").innerHTML=xhr.responseText;
			var result=xhr.responseText;
			document.getElementById('username').innerHTML=result;
		}
	}
	//还有一些程序等待执行

XMLHttpRequest(get&post差异)

get 不用设置请求头（因为没有请求体发送，所以不用设置编码）没有请求主体

var xhr = new XMLHttpRequest;
xhr.open('get','login.php');
xhr.send(null);
xhr.onreadystatechange = function(){
	if(xhr.readyState==4){
		var result=xhr.responseText
		document.getElementById('username').innerHTML=result;

	}
}

post 必须设置请求头（告诉服务器用何种编码解析发送的请求体）有请求主体

var xhr = new XMLHttpRequest;
xhr.open('post','login.php');
xhr.setRequestHeader('content-Type','application/x-www-form-urlendoded');
xhr.send('name=itcase&age=10');
xhr.onreadystatechange = function(){
	if(xhr.readyState==4){
		var result=xhr.responseText
		document.getElementById('username').innerHTML=result;

	}
}

XMLHttpRequest(status)

严谨一点的AJAX必须满足，两个条件，避免逻辑上出现错误

var xhr=new XMLHttpRequest;
xhr.open('get','login.php');
xhr.send(null);
xhr.onreadystatechange=function(){
	console.log(xhr.status)
	if(xhr.readyState==4 && xhr.status==200){
		console.log(xhr.responseText);
	}
}

7 XMLHttpRequest(同步&异步)

var xhr=new XMLHttpRequest;
xhr.open('get','login.php',false);  //默认true代表请求发送的是异步的方式，false表示同步方式发送请求。
xhr.send(null);
console.log("helloajax");  //异步true时会马上打印出来，同步false时需要等待5秒
xhr.onreadystatechange=function(){
	if(xhr.readyState==4&&xhr.status==200){
		console.log(xhr.responseText);
	}
}

php中为：
<?php 
sleep(5);
echo'php返回的内容';

XHMHttpRequest(传参)

post方式传参：在send里面，需要设置请求头的格式setRequestHeader()

var xhr = new XMLHttpRequest;
xhr.open('post','login.php');
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');
xhr.send('name=xiaohua&&age=18');
xhr.onreadystatechange=function(){
	if(xhr.readyState==4 && xhr.status==200){
		var result=xhr.responseText;
		console.log(result);
	}

}


php中用post接收
print_r($_POST);

get方式传参：在url地址上？后面

var xhr = new XMLHttpRequest;
xhr.open('get','login.php?name=xiaohua&&age=18');
xhr.send(null);
xhr.onreadystatechange=function(){
	if(xhr.readyState==4 && xhr.status==200){
		var result=xhr.responseText;
		console.log(result);
	}
}

php中用get接收
print_r($_GET);

XMLHttpRequest(API详解)

xhr.open() 发起请求，可以是get/post方式
xhr.setRequestHeader() 设置请求头，比如’content-Type’,’’
xhr.send() 发送请求主体，get方式使用send(null)
xhr.onreadystatechange=function(){} 监听相应状态

xhr.readyState  =>0时,说明open方法还没调用UNSET
xhr.readyState  =>1时,open已调用OEPENED
xhr.readyState  =>2时,接收到头部信息HEAGDERS_RECEIVED
xhr.readyState  =>3时,接收到相应体(可能不完整)LOADING
xhr.readyState  =>4时,响应完成，DOWN

xhr.status 表示响应码，如：200
xhr.statusText 表示相应信息，如：OK

100-199 表示成功接收请求，要求客户端继续 提交下一次请求才能完成整个处理过程
200-299 表示成功接收请求，并已完成整个处理过程
300-399 未完成请求，客户端需进一步细化请求。例如：请求的资源已经移动到一个新的地址
400-499 客户端的请求有错误
500-599 服务器端出现错误

xhr.responseText 表示相应主体
xhr.getAllResopnseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘Server’) 获取制定头信息
xhr.responseText和xhr.responseXML 都表示相应主体

【面试：get和post请求的差异】
get没有请求主体，使用xhr.send(null)
get可以通过url上添加请求参数

post可以通过xhr.send('name=hh&age=20')发送请求主体
post需要设置请求头 xhr.setRquestHrader('content','....')

get效率更好（应用多）
get大小限制约4k,post没有限制