Ajax入门

本文主要是介绍Ajax入门，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一.什么是ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

什么是异步操作呢，就是在同一网页里进行部分的操作，不需要刷新整个网页，就能刷新局部的数据。

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。  
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

异步请求 ：基于ajax发送的请求都属于异步请求，特点：请求之后，页面不动 响应回来刷新页面局部

二.Ajax包含技术

1. 使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3. 使用XMLHttpRequest来和服务器进行异步通信。
4. 使用javascript来绑定和调用。

一、http协议概述

http协议全称超文本传输协议，服务器与客户端通信的协议。

在http协议的约定下，客户端可以向服务器发送请求，服务器在接收到请求之后，给予客户端响应。

二、http协议请求的常用方法

本节我们讲解http协议常用的四种方法，用来完成数据的增、删、改、查操作。

• get方法：获取数据

• post方法：提交数据

• put方法：修改数据

• delete方法：删除数据

注意的是，http请求本身并不会完成增删改查的基本操作，真正的操作仍然是由服务器完成。

这些操作仅仅是一种约定，例如：我们用get请求配合服务器程序，可以获取数据，同样也可以添加、删除、修改数据，但是为了规范我们的程序，通常只用get方法来查询数据。

三.XML Http Requset

来讲个故事

xmlhttprequest理解成是一个信使，浏览器在做蛋炒饭，给了一封信给信使，让他发给服务器，问服务器炒饭加蛋吗？

浏览器继续炒饭

随后服务器借助信使告诉浏览器，我不要吃炒饭了，我吃大盘鸡，

于是乎浏览器收到信后就说好嘞，那我去做大盘鸡。

xmlhttprequest就是一个中间人的角色，让浏览器在忙的时候，可以和服务器交互，从而不打断浏览器现在的状态。

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器。

四.创建一个XMLHttpRequest

要创建XMLHttpRequest对象是要分两种情况考虑：1.在IE6以下的版本、2.在IE6以上的版本以及其他

<script>
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

这个ifelse是为了照顾ie这个孤儿。我们获得了xmlhttprequest之后可以干嘛呢？

五.使用XMLHttpRequest

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
//最常用的就是这两个方法

open()该方法创建http请求
第一个参数是指定提交方式(post、get)
第二个参数是请求的服务器的地址，自动解析成绝对地址。
第三个参数是指定是异步还是同步(true表示异步,false表示同步,默认为true)
第四和第五参数分别表示用户名和密码，在http认证的时候会用到，可以不指定。

post方法用

setRequestHeader(String header,String value)
设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）

格式：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-unlencoded")

send(content)

发送请求给服务器,其内容可以是DOM对象，输入流或是字符串。

调用open 方法后，可以调用send()方法来发送请求。
当open 中asynch=true时，send()方法调用后立即返回，否则会中断直到请求返回。
方法参数：

如果是get方式，并不需要填写参数，或填写null
如果是post方式，把要提交的参数写上去

（1） responseText 属性      (获得字符串形式的响应数据。)

document.getElementById("Divs").innerHTML=xmlhttp.responseText;

（2）responseXML 属性      (获得 XML 形式的响应数据)

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for(i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("Divs").innerHTML=txt;

七.我们可以在哪里调用XMLHttprequest回来的数据呢？？

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("Divs").innerHTML=xmlhttp.responseText;
    }
}

这个onreadystatechange后面的function就像接口一样，实现了这个接口内部类，当响应的信息发生更改的时候就会调用这个类的方法。（java后台的理解）

onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

statue可以自己去查一下。和404啊那些都是一个东西

八.Ajax优缺点

优点：

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

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

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

4. 基于标准被广泛支持。
   AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

5. 界面与应用分离。
   Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点：

1. AJAX干掉了Back和History功能，即对浏览器机制的破坏。
   在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

2. AJAX的安全问题。
   AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

3. 对搜索引擎支持较弱。
   对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

4. 破坏程序的异常处理机制。
   至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

5. 违背URL和资源定位的初衷。
   例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

6. AJAX不能很好支持移动设备。
   一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

7. 客户端过肥，太多客户端代码造成开发上的成本。
   编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

Ajax的原理是通过XMLhttpRequest对象向服务器发送请求，实例代码如下所示：

//前端程序

var xhr = new XMLHttpRequest(); //创建XHR对象
xhr.open("get","/data");   //规定请求类型
xhr.send()                      //发送请求
xhr.onreadystatechange = function(){ //监听readyState事件
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
  if(xhr.readyState === 4 && xhr.status === 200){
      alert(xhr.responseText)
  }
}

这里需要注意的是，上面的代码，我们在实际开发项目中并不常用，因为通常情况下，我们会引入第三方Ajax库来处理异步请求。

九.封装一个Ajax方法

回调函数

封装到一个myAjax方法，需要注意的是，因为Ajax是异步的操作，因此封装的Ajax不能用return获取返回值。下面的示例使用的是回调函数封装的Ajax方法

function myAjax(method,url,next) {
   let xhr = new XMLHttpRequest();
   xhr.open(method, url);
   xhr.send()
   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {
           next(xhr.responseText);
       }
   }
}
​
document.querySelector("button").onclick = function() {//调用封装的Ajax
  myajax("get","/data",function(data){
      alert(data);
  });
}

Promise

过多的使用回调函数会让程序变得很难维护，用Promise重新封装ajax方法

function myajax(method, url, next) {
   return new Promise(function (resolve,reject) {
       let xhr = new XMLHttpRequest();
       xhr.open(method, url);
       xhr.send(); //可以向后台传输数据
       xhr.onreadystatechange = function () {
           if (xhr.readyState === 4 && xhr.status === 200) {
               resolve(xhr.responseText);
           }
       }
       reject("获取数据失败")
   })
}
document.querySelector("button").onclick = async function () {
   let p = myajax("get", "data");
   p.then(function (data) {
       alert(data);
   })
}

使用async函数才是处理异步问题的终极解决方案，在开发中，尽量使async函数来处理异步问题。

十.例子

使用POST请求

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
<button class="btn btn-success" id="search">查询</button>
<button class="btn btn-success" onclick="addUser()">addUser</button>
<button class="btn btn-success" id="save">添加</button>
        <span id="username"></span>
        <div class="form-group">
            <label class="label">请输入姓名：</label>
            <input id="name" name="name" type="text" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label class="label">请输入住址：</label>
            <input id="address" name="address" type="text" placeholder="请输入住址">
        </div>
</body>

<script>
    document.getElementById("save").onclick = function () {
       
        var request = new XMLHttpRequest();
        request.open("POST","/save");
        var name= document.getElementsByName("name")[0].value;//使用getElementsByName
        var address= document.getElementById("address").value;//使用getElementById(value不带values())
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // request.send("name=jiuyue&address=wuhan");
        var data = "name="+name+"&address="+address;
        request.send(data);
        request.onreadystatechange = function () {
            if (request.readyState==4){ //是否数据接收完成
                if (request.status==200){  //返回的状态码
                    document.getElementById("username").innerHTML = request.responseText;
                } else {
                    alert("发生错误:"+request.status);
                }
            }
        }

    }
</script>

</html>

<html>
<head>

<script type="text/javascript">
function loadXMLDoc(){

var xmlhttp;
if (window.XMLHttpRequest){
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else{
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }

 }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>

</head>
<body>

<div id="myDiv">
<h2>Let AJAX change this text</h2>
</div>

<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script>
    document.getElementById("search").onclick = function () {
        
        var request=new XMLHttpRequest();//创建XMLHttpRequest对象
        request.open("GET","/users");
        
// request.setRequestHeader("Content-Type", "application/x-wwww-form-urlencoded");
       
         request.send();

        request.onreadystatechange = function () {
            if (request.readyState==4){ //是否数据接收完成
                if (request.status==200){ //返回的状态码
                    document.getElementById("username").innerHTML = request.responseText;
                   //将返回的数据赋值到<span>中
                } else {
                    alert("发生错误:"+request.status);
                }
            }
        }

    }
</script>
</head>

<body>
     <button class="btn btn-success" id="search">查询</button>
     <span id="username"></span>
</body>

</html>

这篇关于Ajax入门的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！