JavaScript基础之 AJAX体验（演示步骤，黏贴即可运行）

2022-05-31 13:39:20

学习JavaScript，其中的一个技术-Ajax,这个技术在太常见的一种技术。

简介

AJAX 全称为Asynchronous JavaScript and XML,通过名字可以看出其是异步JS和XML（不过现在更多的是用json来传输数据，而xml变得少用了）.

通过AJAX可以在浏览器中像服务器发送异步请求，最大的优势是：无刷新获取数据 。

AJAX其发展是来自谷歌搜索建议（使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框中键入内容时，JavaScript 会把字符发送到服务器，服务器则会返回建议列表。），随着谷歌搜索建议在2005年发布而流行起来。

这个技术说实话现在看局的很常见，当年可以说是网页技术的一次重大的更新。毕竟传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。而AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

当然AJAX的使用也有利弊的。

优点
- 1：可以无需刷新页面和服务器端进行通信。
- 2：根据用户的事件来更新部分页面内容，会让数据请求服务器获取更快。
缺点
- 其没用浏览历史，所以不能有回退。
- 存在跨域问题（同源），会使数据不安全，当然也可以通过其它设置来解决
- 其返回的数据，在页面源码中无法得到。

提前准备

因为AJAX是一个请求服务器的技术，所以首先要搭建一个服务器才可以有交互的操作。这个我们简单的用基于 Node.js平台，快速、开放、极简的 Web 开发框架Express，搭建一个服务器。（说到着，感觉又要抽时间聊一下Nodejs了，现在简单安装本人步骤搭建即可，哪怕不同node也可以按照本人步骤搭建出服务器）。

安装node这个就不在演示，毕竟网上资源很多，而且其安装也很简单。

主要使用其npm这个软件管理器，其实这个有点像是Redhat中的YUM一样用来获取Express这个服务器框架。
创建服务器
- 我用的pycharm收费版的，其破解方式网上很多，自行百度即可，这个也不在演示了。
- 创建一个nodejs项目。

因为用pycharm创建的所以就不需要对node项目进行初始化了，如果用其它软件或者说不用软件创建，那就需要创建一个文件，然后进行初始化操作：

// 第一步创建一个文件
// 第二步 打开cmd cd到创建的文件下 然后输入 npm init --yes 初始化

因为node按照的时候自带npm，所以可以通过npm按照express服务器框架

打开pycharm下面

~~~cmd
// 这个默认路径就是所在项目的路径
 npm install express --save
~~~

在项目中创建一个js文件，然后配置express服务器的信息如下

//1 引入express 服务器
const express=require("express");

//2创建应用对象
const app=express();

//3 创建一个路由规则 
   //request 这个是一个参数命 其代表对请求的报文封装
   //response  也是一个参数名  其代表是对响应报文封装
//只监控get请求 如果监控post 那就需要写app.post,当然两个可以一起写
app.get('/',(request,response)=>{
    // 方便响应数的获取 不考虑安全什么的，直接返回数据可以跨域
  response.setHeader("Access-Control-Allow-Origin","*");
  response.send("HELLO WORD");
})

app.post('/',(request,response)=>{

    // 方便响应数的获取 不考虑安全什么的，直接返回数据可以跨域
  response.setHeader("Access-Control-Allow-Origin","*");
  response.send("HELLO WORD--post");
})

//4: 监听端口 启动服务
app.listen(8000,() =>{
    console.log("服务监控已启动")
})

启动服务器，以及查看是否配置成功。

node 配置的js名（如果不是当然路径，需要带路径或者cd到路径下）  
例如名字 .js
  node test

可以看出监控端口没用问题，然后在浏览器中输入：http://127.0.0.1:8000/

代码演示

这个需要了解http协议，因为浏览器中最常用的访问协议，这个协议就不在进行拓展了，不然这个篇幅有点太长了，如果需要后面再写文章再补充。

这个协议中最常用的的两种方式：GET和POST

AJAX步骤

1：创建对象

// 1: 创建对象  创建实例通过 XMLHttpRequest
    const  xhr=new XMLHttpRequest();

补充：

这个又涉及到浏览器版本问题，有些老的版本不支持XMLHttpRequest ，因为老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象。

如果为了兼容性更好(当然现在的浏览器版本很少见哪些低版本的浏览器了)。会写如下：

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

2：初始化，设置请求的方法和url

这个主要是XMLHttpRequest的open(method,url,async)方法。

参数	参数解释
method	请求的类型；GET 或 POST等
url	也就是请求的地址
async	true（异步）或 false（同步），Ajax一般都是异步

//GET方法请求
xhr.open('GET','http://127.0.0.1:8000/',true);

//xhr.open('POST','http://127.0.0.1:8000/',true);

3:发送请求

这个使用的是send(string)方法。

方法	解释
send()	一般get方式或者post无参的时候用这个无参方法
send(string)	这种带参数的send方法,只会在post的带参的时候使用

//  GET请求发送或者无参的POST请求
xhr.send();
// POST带参请求
xhr.send('参数'); //参数一般是 a=1&b=5 格式，当然其它格式也可以，看你对参数的处理方式是什么了。

4：服务器响应

毕竟请求还是需要有响应的，不然也没用多少意义

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。
response	这个获取的数据格式根据responseType设置的格式改变而改变

当然响应可以得到很多其它的属性，只写列出了一些会用到的。

这个会有一个终于的事件那就是：onreadystatechange事件。当请求被发送到服务器时，需要执行一些基于响应的任务。每当readyState 改变时，就会触发 onreadystatechange 事件。

readyState属性存有 XMLHttpRequest 的状态信息。

下面再列举一些XMLHttpRequest对象的三个重要的属性。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化 1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面（当然还有很多比如302，503等等太多不在列举，这些是html协议的一些响应码）

注意：readyState仅仅针对的是请求的状态码，获取资源是否成功取决于status的状态

xhr.onreadystatechange=function(){
   if(xhr.readyState==4 && xhr.status==200 ){
      var str=xhr.responseText;
   }
}

代码演示

因为本篇注意使用讲解ajax，而对于Nodejs以及Express的使用就用到上面准备的即可。

因为两种请求get和post太多重叠，所以单独就演示一个完整post请求了。

演示目的：
  将服务器端返回的数据显示在界面(数据是一个json格式)。

通过前面的准备，可以知道自己配置的服务器没用问题，现在直接看是上完整的代码：

下面代码直接可用，运行的时候记得启动Express服务器

第一：后台

//1 引入express 服务器
const express=require("express");
//2创建应用对象
const app=express();

//3 创建一个路由规则
   //request 这个是一个参数命 其代表对请求的报文封装
   //response  也是一个参数名  其代表是对响应报文封装
app.get('/',(request,response)=>{

    // 方便响应数的获取 不考虑安全什么的，直接返回数据可以跨域
  response.setHeader("Access-Control-Allow-Origin","*");
    // const strjson='[{"name":"张三","age":12},{"name":"李四","age":14},{"name":"王五","age":12}]' ;
  const json_data=JSON.parse(strjson)
  response.send(json_data);
})

app.post('/',(request,response)=>{

    // 方便响应数的获取 不考虑安全什么的，直接返回数据可以跨域
  response.setHeader("Access-Control-Allow-Origin","*");

  const strjson='[{"name":"张三","age":12},{"name":"李四","age":14},{"name":"王五","age":12}]' ;
  const json_data=JSON.parse(strjson)
  response.send(json_data);
})


//4: 监听端口 启动服务
app.listen(8000,() =>{
    console.log("服务监控已启动")
})

第二前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<h1>post请求回去数据</h1>
<button id="ocl">点击</button>
<div id="data">

</div>
<script>
    var divdata=document.getElementById("data");
    var buttonclick=document.getElementById("ocl");
    var tabledata=document.createElement("table");
    buttonclick.onclick=function () {
        const xhr=new XMLHttpRequest();
        //自己写的原生Ajax在发送post请求的时候需要加入这个请求头  等于告诉服务器自己发送的参数a=1&b=1对应的是键值对参数。 为什么不直至写键值对，的原因是这样更方便。
        //

        // 知道自己传输的数json，所以直接用这种方式了不用  xhr.responseText 获得字符串，然后再转json了

        xhr.responseType="json";
        xhr.open("POST","http://127.0.0.1:8000/",true);
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("a=1&b=1");
        xhr.onreadystatechange=function () {
         if(xhr.readyState==4 && xhr.status==200){
            const jsondata=xhr.response;
            for(let i=1;i<jsondata.length;i++){
               const obj=jsondata[i];
               const name=obj["name"]
               const age=obj["age"];
               // console.log(obj);
               // console.log(name);
               // console.log(age);
               //这个地方是js的document操作html元素 如果需要后期再聊一写html和document吧
               const tre= document.createElement("tr");
               const td1= document.createElement("td");
               td1.append(name);
               const td2= document.createElement('td');
               td2.append(age);
               tre.append(td1);
               tre.append(td2);
               tabledata.append(tre)

            }
           divdata.append(tabledata)
         }
        }

    }

</script>
</body>
</html>

页面结果：

点击这个点击按钮会一直的添加数据，而不会刷新页面，下面也可以看见参数。本来想再写一个根据jquery使用AJAX,然后自己也封装通过原始AJAX封装一个这个后面再写吧，还是先了解AJAX,如何使用吧。

码农公寓

简介

提前准备

代码演示

AJAX步骤

1： 创建对象

2：初始化，设置请求的方法和url

3:发送请求

4：服务器 响应

代码演示

相关文章

1：创建对象

4：服务器响应