【javascript-35】基本的AJAX与常见的状态码以及常见的跨域问题的解决方式

ajax是一个异步的javaScript和XML，是一种无需加载页面的情况下，能够与与更新部分网页内容技术，通俗的说即使我们通过ajax去请求服务器数据，然后根据数据改变页面

优势：异步加载数据无需刷新页面，用户体验好，节省流量，可以通过js 来控制，比较灵活

1.AJAX的四步

<script>
	//1.创建ajax
    var xhr = new XMLHttpRequest();
    //考虑到兼容性的写法
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.打开服务器地址
    xhr.open();
    //open三个参数1.请求接口类型 get/post 2.接口地址：要请求的服务器地址 3.设置同步请求还是异步请求 true代表异步请求，false代表同步请求，默认为异步请求
    
    //3.设置请求头，只有post方式的接口才需要设置请求头
    xhr.setRequestHeader(三种格式);
		// xhr.setRequestHeader("Content-type",)
		// 数据格式
		// name= 张三&age=22
		// 三种格式
		// application/x-www-form-urlencoded
		// 数据格式一般使用json比较多
		//{name:张三,age:22}
		// application/json
		//multipart/form-data
		// 上传文件的时候使用
    
    
    //4.发送数据
    xhr.send();
    //get请求的send为空，get请求时通过地址栏拼接的形式来发送数据，post中的send里面的内容是要发送的内容
    
    //5.接收数据
    xhr.onreadystatechange = function (){
        if(xhr.readyState ==4){
            //通常在这里处理，xhr.reponseText 获取字符串形式的人数据，数组对象需要转字符串
            var data = JSON.parse(xhr.responseText);
        }
    }
    
</script>

拨号成功触发

xhr.readyState 五个值

0：请求初始化

1：服务器连接建立

2：请求接收

3：请求处理等待

4：请求完成数据返回

2.get请求

状态码

​ //200 代表响应成功 以2开头的都代表成功
​ //302 临时重定向
​ //304 本次读取缓存内容
​ //400 参数错误
​ //404 地址路径错误
​ //403 禁止访问，没有权限
​ //500 服务器错误，大概率是后端错误

HTTP状态码
1xx Informational（信息性状态码） 接受的请求正在处理
2xx Success（成功状态码） 请求正常处理完毕
（1）、200 OK：表示从客户端发送给服务器的请求被正常处理并返回；
（2）、204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；
（3）、206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。
3xx Redirection（重定向） 需要进行附加操作以完成请求
（1）、301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
（2）、302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；
（3）、301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
（4）、303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
（5）、302与303的区别：后者明确表示客户端应当采用GET方式获取资源
（6）、304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；
（7）、307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；
4xx Client error（客户端错误） 客户端请求出错，服务器无法处理请求
400 Bad Request：表示请求报文中存在语法错误；
401 Unauthorized：未经许可，需要通过HTTP认证；
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；
5xx Server Error（服务器错误） 服务器处理请求出错
500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

3.post请求

<input class="user" type="text" placeholder="请输入账号">
	<input class="pass" type="text" placeholder="请输入密码">
	<button>提交</button>

	<script>
		var user = document.querySelector(".user");
		var pass = document.querySelector(".pass");
		var btn = document.querySelector("button");
		btn.onclick = function (){
			//创建ajax
			var xhr = new XMLHttpRequest();
			//打开服务器地址
			// xhr.open("post","http://121.196.8.145:10000/test/login");
			xhr.open("post","https://www.dome.huaiyoudiary.com");
			//设置请求头
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//传送报文
			//send里面是拼接头部http中的字符串
			xhr.send("telnumber="+user.value+"&password="+pass.value);

			//声明事件来接收数据
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					if(xhr.status ==200){
						var data = JSON.parse(xhr.responseText);
						console.log("data",data);
						//与服务器连接的状态
					console.log("xhr.status",xhr.status);
					//登录成功,有bug，有符号会报错
					if(data.code == 200){
						alert(data.message);
					}else{
						alert(data.message);
					}

					}
					
				}
			}
		}

	</script>

4.get与post的区别

	//get 通过地址栏拼接参数，但是因为地址栏长度有限，所以get传输数据也有限
	//post 没有数据传输大小的限制
	//get不需要设置请求头post需要设置请求头
	//get请求数据可能被缓存post不会
	//get只能URL编码，post支持的编码格式众多

1、get请求不安全，post安全 ；
2、get请求数据有大小限制，post无限制 ；
3、get请求参数会在url中显示，容易被他人窃取，post在请求体中，不会被窃取；
4、post需要设置请求头。

5，跨域与解决方法

	//跨域：http://www.baidu.com:10000
	//     协议 域名 :端口
	// 当以上三个一个不相同时就会出现跨域问题，也就是说，不同域之间请求数据，被称为跨域


	//解决方式 
	//CORS机制 后台设置权限，谁都可以访问
	//jsonp：是利用script标签 script标签自带跨域的能力 面试会问