19AJAX

Posted 飞刀还问情

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了19AJAX相关的知识,希望对你有一定的参考价值。

1.Ajax的概念

Ajax是一种在无需重新加载整个网页(刷新页面)的情况下,能够更新部分网页的技术。

Ajax的全称是Asynchronousjavascript and XML,即异步JavaScript+XML。它并不是新的编程语言,而是几种原有技术的结合体。

2.Ajax的优势

==(一) 无刷新更新数据。==

??Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。

==(二) 异步与服务器通信==

??Ajax使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。

==(三) 前端和后端负载平衡==

??Ajax可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,Ajax的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。

3.Ajax的工作原理

??Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。

??Ajax其核心有++JavaScript、XMLHTTPRequest、DOM++对象组成,通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

4.扩展:同步和异步

异步:同时执行,也叫并发
同步:按步骤顺序执行,一条一条执行

5.扩展:程序、进程和线程

程序是指令的集合,
执行的程序称之为进程,
执行的个数是线程.

6.编写步骤

ajax请求:
1.创建Ajax对象
2.连接服务器
3.发送请求
4.接收返回 (Ajax返回的是字符串)

js:
function ajax(url,fnWin,fnFaild){
    //1.买手机(创建ajax对象)
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");//XMLHttpRequest ,IE8一下不兼容
    //2.拨号(与服务器建立连接)
    xhr.open("GET",url,true);
    //第一个参数:传递方式GETorPOST
    //第二个参数:请求的URL地址
    //第三个参数:是否异步 true : 异步   false : 同步   默认:true

    //3.说话(发送请求)
    xhr.send();
    //4.听(接收返回)
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                if(typeof fnWin == ‘function‘){
                    fnWin(xhr.responseText);
                }
                
            }else{
                if(typeof fnFaild == ‘function‘){
                    fnFaild();
                }
            }
        }
    }
}

html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>通过ajax,向服务器请求数据,将服务器的数据放到div中</p>
        <input type="button" name="btn" id="btn" value="请求数据" />
        <div id="box">
            
        </div>
        <script type="text/javascript" src="js/ajax.js" ></script>
        <script type="text/javascript">
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("box");
            oBtn.onclick = function(){
                ajax(‘abc1.jpg‘,function(str){
                    oDiv.innerHTML = str;
                },function(){
                    oDiv.innerHTML = "服务器上没有您请求的数据!";
                })
            }
        </script>
    </body>
</html>
ajax面向对象的封装
var ajax = {};
ajax.get = function(url,fn){
    var xhr = new XMLHttpRequest();
    xhr.open(‘get‘,url);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            if(typeof fn === ‘function‘){
                fn(xhr.responseText);
            }
        }
    }
}
ajax.post = function(url,data,fn){
    var xhr = new XMLHttpRequest();
    xhr.open(‘post‘,url);
    //设置请求头
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            if(typeof fn === ‘function‘){
                fn(xhr.responseText);
            }
        }
    }
}
(三) Open方法:
  1. URL是相对于当前页面的路径,也可以使用绝对路径
  2. Open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送。
  3. 只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错
(四) Post传参:

发送表单数据

==xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");==

(五) 请求状态监控

==1. Onreadystatechange(状态改变事件)==
++1) readyState属性:请求状态++

a) 0 : 请求未初始化(还没有调用open())

b) 1 : 请求已经建立,但是还没有发送(还没有调用send())

c) 2 : 请求已发送,正在处理中(通常现在可以从响应中获取内容头)

d) 3 ;请求在处理中,通常响应中已有部分数据可用了,但是服务器还不有完成响应的生成。

e) ++==4==: 响应已完成,您可以获取并使用服务器的响应了。++

2) ==Status属性 : 请求结果==
扩展:

201-206都表示服务器成功处理了请求的状态代码,说明网页可以正常访问。
==200(成功)服务器已成功处理了请求。通常,这表示服务器提供了请求的网页。==

4XX表示请求可能出错,会妨碍服务器的处理。
==404(未找到)服务器找不到请求的网页。==

一、 JS解析JSON

(一) ==Eval()方法==:解析JSON数据的最常用方法是使用javascript的eval()方法,代码如下 :

function toJson(str){
   var json = eval(‘(‘ + str + ‘)’);
   return json;
}

++该方法存在性能和安全方面的问题,不建议使用。++

(二) ==JSON.parse()方法==
这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10以上版本,这些浏览器都已经接近W3C标准,默认实现了toJSON方法。代码如下:

function toJson(str){
     return JSON.parse(str);
}

(三) ==New Function方法==:代码如下

function toJson(str){
    var json = (new Function(“return” + str))();
    return json;
}
二、 局部数据刷新

(一) 请求并显示静态TXT文件

  1. 字符集编码(三个按钮分别读取三个不同的文件并存入div中)
  2. 缓存、阻止缓存(?t=newDate().getTime())

(二) 动态数据:请求json文件

  1. 分页

    三、 事件委托的应用
    四、 前后端分离

200(成功)服务器已成功处理了请求。通常,这表示服务器提供了请求的网页。














以上是关于19AJAX的主要内容,如果未能解决你的问题,请参考以下文章

19 01 11 javascript ?????????????????????(???????????????) ??????????????????????????????(代码片段

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段