Ajax入门-CFANZ编程社区

一.什么是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();
//最常用的就是这两个方法

（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 的每个变化。

值	xmlhttp.readyState的值及解释：
0	请求未初始化（还没有调用 open()）。
1	请求已经建立，但是还没有发送（还没有调用 send()）。
2	请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3	请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4	响应已完成；您可以获取并使用服务器的响应了。

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

八.Ajax优缺点

优点：

缺点：

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>