Ajax详解

最新推荐文章于 2023-06-05 16:14:21 发布

peri_ha

最新推荐文章于 2023-06-05 16:14:21 发布

阅读量219

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_37124490/article/details/79826726

版权

前端基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Ajax：AsynchronousJavaScript and XML（异步JavaScript和XML)

Ajax技术的核心操作是用XmlHttpRequest对象进行异步数据处理。所谓异步，可以理解为是非阻塞的方式，后面的程序不必等待当前的处理完了再执行。

为什么AJAX可以不用刷新就能与服务器进行交互？

——依靠XMLHttpRequest 对象实现（所有现代的浏览器都支持 XMLHttpRequest 对象）。

XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

XMLHttpRequest 对象所做的事情：

    在不重新加载页面的情况下更新网页
    在页面已加载后从服务器请求数据
    在页面已加载后从服务器接收数据

在后台向服务器发送数据

Ajax的优缺点

与传统的web 请求/相应模式相比：
优点：如果需要更新内容，不必重载整个网页面；AJAX应用可以仅向服务器发送并取回必需的数据，通过在后台与服务器进行少量数据交换，实现网页的异步更新。避免了在网络上发送那些没有改变过的信息。就是能在不更新整个页面的前提下维护数据，就是允许浏览器与服务器进行通信而无需刷新页面，这使得Web应用程序能够更为迅捷地回应用户动作。

缺点：传统的遵循请求/响应模式的应用，对于每个请求都会加载整个页面，所以，原来查看的页面都会放到浏览器的历史栈中。而Ajax用XHR对象做出的请求不会记录在浏览器的历史中。如果你的用户习惯使用浏览器的“后退”按钮在Web应用中进行导航，就可能会产生问题。

交互过程

-创建xmlhttprequest对象

-向服务器发送请求（利用xhr对性爱那个的open和send方法）

-获得来自服务器的相应（利用xhr对象的reponseText或者reponseXML属性）

//1.打开浏览器
var xhr = new XMLHttpRequest();
//2.在地址栏输入地址
xhr.open('get','1.txt',true);
//3.提交
xhr.send();
//4.等待服务器返回内容
xhr.onreadystatechange = function() {
    if ( xhr.readyState == 4 ) {
        alert(xhr.responseText );
    }
}

第一步：1.兼容ie6方式：（ie6以下new ActiveXObject('Microsoft.XMLHTTP')）

var xhr=null;
if(window.XMLHttpRequest){
    xhr=newXMLHttpRequest();
}else{
    xhr=newActiveXObject('Microsoft.XMLHTTP');
}

2.也可以用trycatch兼容：

var xhr=null；      
try{
    //如果有错误执行catch,并传入错误参数
    xhr=new XMLHttpRequest();
}catch{
    xhr=new ActiveXObject('Microsoft.XMLHTTP');
}

第二步：Open方法：xhr.open('get','1.txt',true);

三个参数：

1、提交方式 Form-method

2、提交地址 Form-action

3、是否异步

—异步:非阻塞。前面的代码不会影响后面代码的执行

—同步:阻塞。前面的代码会影响后面代码的执行

表单的三个属性

1、action: 数据提交的地址，默认是当前页面

2、method : 数据提交的方式，默认是get方式

—get：通过url地址传输；数据名称和数据值用=连接，如果有多个的话用&进行连接，然后把数据放到url?后面传到指定页面；有数据量限制；url长度限制的原因，我们不要通过get方式传递过多的数据。

—post：post通过浏览器内部传输；理论上无限制。

3、enctype : 提交的数据格式，默认application/x-www-form-urlencoded

第三步：send方法：发送数据请求，相当于Form的submit

第四步：请求状态监控：onreadystatechange事件（当readystate改变时触发）

readyState属性：请求的状态

0 （初始化）还没有调用open()方法

1 （载入）已调用send()方法，正在发送请求

2 （载入完成）send()方法完成，已收到全部响应内容

3 （解析）正在解析响应内容

4 （完成）响应内容解析完成，可以在客户端调用了

status属性：服务器(请求资源)的状态，http状态码

返回的内容：responseText：返回以文本形式存放的内容

responseXML：返回XML形式的内容

关于两种传输方式的注意点

Get方式两个问题

1.缓存；在url？后面连接一个随机数，时间戳

2.乱码；

Xhr.open(‘get’,’2.get.php?username=’+encodeURL(‘pp’)+’&age=24&’+newDate().getTime(),true);

Post方式

1.数据放在send()里面作为参数传递

2.需要设置请求头，声明发送的数据类型

3.post没有缓存问题；无需编码

xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('username=刘伟&age=30');

JSON

JSON：JSON是一个对象,ie7及以下不支持原生，可以上json.org下载对应语言包解决。

JSON有两个重要的方法

1.stringify:把一个对象转成对应字符串；

var arr=[1,2,3];
alert(JSON.stringify(arr));
//输出[1,2,3]字符串
var j={left:100};
alert(JSON.stringify(j));
//输出{"left":100}字符串；一定要严格格式：双引号

2.parse把字符串转成对应对象

vars1='[100,200,300]';
vara1=JSON.parse(s1);
alert(a1);
//输出100,200,300数组
vars2='{"left":100}';
vara2=JSON.parse(s2);
alert(a2.left);

DEMO

封装myAjax.js

//将参数尽可能提取出来适应更多需求
function myAjax(method,url,data,success){
       var xhr = null;
       try {
              xhr = new XMLHttpRequest();
       } catch (e) {
              xhr = newActiveXObject('Microsoft.XMLHTTP');
       }
       //url是可变的
       if(method=='get'&& data){
              url+='?'+data;
       }
       xhr.open(method,url,true);
       if(method=='get'){
              xhr.send();
       }else{
              xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
              xhr.send(data);
       }
       xhr.onreadystatechange = function() {
              if ( xhr.readyState == 4 ) {
                     if ( xhr.status == 200 ) {
                        //如果存在,执行
                           success &&success(xhr.responseText);
                     } else {
                            alert('出错了,Err：' + xhr.status);
                     }
              }
       }
}

调用myAjax.js的html：

       oBtn.onclick =function() {
                  setInterval(function(){
                     myAjax('get','getNews.php','',function(data){
                     //转换成对象
                     //回调
                     var data=JSON.parse(data);
                     varoul=document.getElementById('ul1');
                     //添加内容到ul
                     var content='';
                     for(vari=0;i<data.length;i++){
                          content+='<li><a>'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>'
                     }
                     oul.innerHTML=content;
              })
              },1000)
       }

参考：

1. XMLHttpRequest-MDN

2. 文章：https://www.cnblogs.com/pangblog/p/3295348.html