Ajax通信技术

AJAX部分

JavaScript ajax

什么是ajax

ajax=异步js和XML

ajax是一种用于创建快速动态网页的技术

通过与后台和服务器的少量数据交换，来使网页实行异步更新。

这意味着可以在不重新加载网页的情况下，进行对网页的某部分修改

ajax的优点

1. 无需刷新页面即可与服务器端交换数据

2. 允许通过用户对页面的操作来改变页面内容

3. 没有浏览历史，不能后退

4. 反爬虫

什么是HTTP协议

HTTP（Hyper Text Transport protocol）协议【超文本传输协议】

协议规定了浏览器和万维网服务器之间互相通信的规则约定

请求报文

重点是格式与参数

请求行 传输方式 URL路径 HTTP协议版本

请求头 Host：atguigu.com 这些都是格式，具体内容不限

​ Cookie： name=guigu

​ Content-type： application/x-www-form-urlencoded

​ User-Agent: chrome 83

空行

请求体（如果是get请求这是空的，如果是post那么可以写东西）

例如：username=zhangsan&password=123456

响应报文

响应行 HTTP版本 响应状态码 响应状态字符串

​ 404（找不到）

​ 403（无法访问）

​ 401（未授权）

​ 500（内部错误）

​ 200（OK）

响应头（对响应体的一些描述）

​ Context-Type：text/html;charset=utf-8

​ Content-length:2048

​ Content-encoding:gzip

空行

响应体（返回报文的主要内容）

​ 例如：

​

​

​ name

​

​

js在接到响应体后会进行提取和渲染最终返回到html界面上

浏览器中查看请求响应

node.js和Express

1. 下载与安装

Node.js 中文网 (nodejs.cn)

2. 配置运行Express

运行文件：

1.  // 1.引入express  

2.  const { response } = require('express');  

3.  const express = require('express')  

4.  

5.  // 2.创建应用对象  

6.  const app=express();  

7.  

8.  // 3.创建路由规则  

9.  // require是对请求报文的封装  

10.  // response是对响应报文的封装  

11.  app.get('/server',(request,response)=>{  

12.  // 设置响应头，设置允许跨域  

13.  response.setHeader('Access-Control-Allow-Origin','\*')  

14.  // 设置响应体  

15.  response.send('Hello Express')  

16.  

17.  });  

18.  

19.  // 4.监听端口启动服务  

20.  app.listen(8000, ()=>{  

21.  console.log("服务已经启动，8000端口监听中...")  

22.  })  

创建XMLHttpRequest对象

简介：现在基本上市面流行的所有浏览器均内建XMLHttpRequest对象

创建XMLHttpRequest对象的语法

aaa=new XMLHttpRequest()  

老版本的IE5和IE6使用ActiveX对象

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

判断是否支持XMLHttpRequest：window.XMLHttpRequest

向服务器发送请求

aaa.open(“发送方法”,”服务器上的位置”,”同步或者异步”)  //规定请求的类型

get或者post url地址 true表示异步，false表示同步

aaa.send() //将请求发送到服务器

get和post详解

get：速度快

post：需要更新服务器上的文件或是数据库

没有数据量限制

发送包含未知字符的用户数据，post比get更加可靠

get案例：

xmlhttp.open("GET","/try/ajax/demo_get.php",true);   

xmlhttp.send();  

这样写的话有可能会返回、缓存的内容

为了避免这种情况：我们可以在URL后面添加一个唯一的ID

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),**true**);  

xmlhttp.send();  

post案例：

1. ```js
   xmlhttp.open(“POST”,”/try/ajax/demo_post.php”,true);  xmlhttp.send();  

      
   
   
   如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
   
   1.  xmlhttp.open("POST","/try/ajax/demo\_post2.php",**true**);  
   
   2.  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
   
   3.  xmlhttp.send("fname=Henry&lname=Ford");  
   
   setRequestHeader()用来向请求添加HTTP头
   
   ### js操作连接服务器结构模板
   
   ```js
   if(window.XMLHttpRequest){              /* 判断浏览器支持情况 */  
   
   	const XHR=new XMLHttpRequest()      /* 一般创建对象 */  
   
       XHR.open("GET","http://127.0.0.1:8000/json-server")     /* 声明传输方式和地址 */  
   
       XHR.send('a=100&b=200&c=300')        /* 发送或者携带内容发送 */  
   	
       /* onreadystatechange方法每当readyState改变一次就执行一次 */
       XHR.onreadystatechange=function(){   
           
   		/* readyState返回XMLHTTP请求的当前状态   status返回状态码 */  
           if(XHR.readyState=="4"&&XHR.status=="200"){ 
   
               console.log(XHR.response)   /* 打印响应的内容 */  
   
               XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded")  
   
               XHR.setRequestHeader("name","MouseUpShow")   /* 设置响应头信息 */  
   
           }  
       }  
   }else{  
       const XHR=new ActiveXObject("Microsoft.XMLHTTP")    /* IE5、IE6创建对象 */  
   }  

服务器响应json数据

服务器添加json数据：

1. app.all(‘/json-server’,(request,response)=>{  

2. // 设置响应头，设置允许跨域  

3. response.setHeader(‘Access-Control-Allow-Origin’,’*‘)  

4. response.setHeader(“Access-Control-Allow-Headers”,”*“)  

5. // 设置响应体  

6. const data={    //一个json语句  

7. name:’Ajax Json’  

8. }  

9. // 对对象进行字符串转化  

10. var str=JSON.stringify(data)  

11. // 设置响应体  

12. response.send(str)  

14. });  

html文件：

1. XHR.responseType=”json”   /*自动转换json语句*/

2. test.innerHTML=XHR.response.name;  

window.performance.navigation.type得到一个数字

0：是由地址栏输入、表单验证、超链接、脚本操作等方法进入

1：刷新得到的网页

2：通过前进后退得到的

255：任何其他来源

jQuery ajax

jquery调用ajax方法：

格式：$.ajax({})

参数：

​ type：请求方式GET/POST

​ url：请求地址url

​ async：是否异步，默认为true表示异步

​ data：发送到服务器的数据

​ dataType：与其服务器返回的数据类型

​ contentType：设置请求头

​ success：请求成功时调用此函数

​ error：请求失败时调用此函数

$.ajax({

	type: "get" //传输方式

	url:"showuser", //地址

	async :true, //是否异步

	dataType:"txt", //预期返回的文本类型

	data:{}, //一同发送的数据  
		success:function (data,status,xhr){ 
    		//成功后回调函数
		},
		error:function () { //失败后回调函数  
			alert("shibai")  
		}  
})

jquery调用get方法

$.get(
	"showuser", //url地址  
	{name:”张三”,age:”18”}, //跟随发送的数据  
	function (data,status,xhr){ }

	//data：返回得到的数据

	//status:请求的状态

	//xhr包含XMLHttpRequest  
	}  
)

jquery调用post方法同上，即使用post方法进行传递