原生Ajax(获取(GET)&请求(POST))数据 及 原理

ajax(Asynchronous Jacascript and XML)

ajax可以在不重新加载整个网页的情况下,对网页的某个部分数据进行更新
ajax不需要任何浏览器插件,只需要用户允许Javascript在浏览器上执行,因为ajax需要借助javascript来实现浏览器和服务器之间的异步交互

 

工作原理:

在用户端和服务器端之间添加一个中间层(ajax引擎),改变同步交互的过程,并不是所有的用户请求
都提交给服务器端,可以把部分的数据提交给ajax引擎来做,当需要从服务器端读取新的数据时,可以
由ajax引擎项服务器提交请求,从而使用户操作和服务器响应异步化

 

ajax的组成部分:

Javascript,DOM,CSS,XMLHttpRequest(ajax的核心)
XMLHttpRequest对象负责将客户端信息以异步通信的方式发送给服务器端,并接收服务器端返回的响应

 

信息和数据:

在ajax中,通过XMLHttpRequset对象向服务器发送异步请求,从服务器端获取数据,使用js操作DOM元素
来刷新页面和重组数据,依靠css来布局

 

优点:

减轻服务器负担,提高web性能,不需要插件支持,调用外部数据方便,达到页面和数据的分离

 

缺点:

不能很好的支持移动设备,不能很好的支持搜索引擎

 

Ajax请求与获取数据 ( POST / GET ) 五个步骤 

  1. 创建XMLHttpRequest()对象
  2. 创建回调函数
  3. 请求数据
  4. 设置请求的HTTP头部信息(这是请求头)
  5. 在回调函数里根据返回的不同状态进行操作

 

一:创建XMLHttpRequest()对象

1 var ajax;
2 if(window.XMLHttpRequest){
3     ajax = new XMLHttpRequest(); // 兼容其他浏览器
4 }else{
5     ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容老版IE
6 }

 

二:创建回调函数

设置ajax的事件处理函数,交互时的操作

1 ajax.onreadystatechange = function(){}

 

三:将请求发送到服务器

1 // 请求数据 类型 为 POST ,data.php 是请求路径 ,true异步请求
2 ajax.open("POST","data.php",true);
3                 
4 //发送数据 以 键名 = 键值 形式 多个请求 用 & 隔开
5 ajax.send("userName="+userName+"&location="+location);

 

四:设置请求的HTTP头部信息

HTTP请求头类型有4种

1  // 1.发送表单数据
2 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");        
3  // 2.发送纯文本(默认值)
4 ajax.setRequestHeader("Content-type","text/plain;charset=utf-8");       
5  // 3.发送html文本
6 ajax.setRequestHeader("Content-type","text/html;charset=utf-8");        
7  // 4.发送json格式的数据:
8 ajax.setRequestHeader("content-type","application/json;charset=utf-8");

 

五:在回调函数里根据返回的不同状态进行操作

 1 ajax.onreadystatechange = function(){ // 事件函数 监听
 2             
 3 // 判断readyState == 4(交互完成)status服务器返回的状态(200是ok)
 4     if(ajax.readyState == 4 && ajax.status == 200){
 5             
 6         console.log(ajax.responseText); // 接收返回的信息   
 7
 8     }else{
 9             console.log("异步交互失败");
10     }
11 }

 

以上就是ajax请求数据五个步骤:

 

POST:

 1 var ajax;
 2 if(window.XMLHttpRequest){
 3     ajax = new XMLHttpRequest(); // 兼容其他浏览器
 4 }else{
 5     ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容老版IE
 6 }
 7 
 8 // 请求数据 类型 为 POST ,data.php 是请求路径 ,true异步请求
 9 ajax.open("POST","data.php",true);
10                 
11 //发送数据 以 键名 = 键值 形式 多个请求 用 & 隔开
12 ajax.send("userName="+userName+"&location="+location);
13 
14 // 设置请求头
15 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
16 
17 // 事件函数 监听返回
18 ajax.onreadystatechange = function(){ 
19              
20  // 判断readyState == 4(交互完成)status服务器返回的状态(200是ok)
21      if(ajax.readyState == 4 && ajax.status == 200){
22              
23          console.log(ajax.responseText); // 接收返回的信息  
24        
25      }else{
26             console.log("异步交互失败");
27     }
28 }

 

GET:

与 POST 一样,不用设置请求头

 1 var ajax;
 2  // 判断:兼容IE和其他浏览器
 3 if(window.XMLHttpRequest){
 4     ajax = new XMLHttpRequest();//兼容其他浏览器
 5 }else{
 6     ajax = new ActiveXObject("Microsoft.XMLHTTP");//兼容老版IE
 7 }
 8                 
 9  // 设置ajax的事件处理函数,交互时的操作,当readyState的属性值发生改变操作
10  // 判断readyState == 4(交互完成)status服务器返回的状态(200是ok)
11 if(ajax.readyState == 4 && ajax.status == 200){
12                         
13     console.log(ajax.responseText);// 接收返回的信息
14                             
15 }else{
16     console.log("异步交互失败");
17 }
18                 
19  // 请求数据 类型 为 GET ,data.php 是请求路径 ,异步请求
20 ajax.open("GET","data.php",true);
21                 
22  // 将请求发送到服务器,就是将请求发送出去,发送到ajax.open的路径
23 ajax.send();

 

XMLHttpRequest对象的常用属性和方法

属性:

readyState(0-4) :

  0 -- 代表未初始化
  1 -- 代表正在加载
  2 -- 代表加载已完成
  3 -- 代表正在交互
  4 -- 代表交互完成

onreadystatechange -- 指定当发生任何状态变化时(readyState的属性值发生改变)的时间处理函数。

ajax.onreadystatechange = function(){} -- 这是一个事件处理函数

responseText -- 客户端接收到的HTTP响应文本内容

status -- 描述服务器返回的HTTP状态代码,比如:200对应ok,404对应 no found, 502, 301 等等

statusText -- 描述服务器返回的HTTP状态代码文本: 比如:ok,not found

 

方法:

abort() -- 停止当前请求

getAllResponseHeaders() -- 获取HTTP请求的所有响应的头部(获取所有的请求头)

getResponseHeaders() -- 获取指定HTTP请求的响应的头部(获取指定的请求头)

open(arg1,arg2,arg3):
  arg1 -- 请求的类型,get或者post
  arg2 -- 文件路径或者接口地址
  arg3 -- true或者false, true代表异步,false代表同步

send() -- 将请求发送到服务器

setRequestHeader() -- 设置请求的HTTP头部信息(这是请求头)

 

posted @ 2020-04-12 23:09  sanyekui  阅读(1327)  评论(0编辑  收藏  举报