首页 » JavaScript » ajax的用法——基于XMLHttpRequest

ajax的用法——基于XMLHttpRequest

原文 http://blog.csdn.net/chaoyangsun/article/details/79228841

2018-02-02 02:00:22阅读(314)

用法

1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2、使用xhr的 open() 和 send() 方法发送请求

/*
 * 第一个参数:表示请求方式 总共两种 GET POST
 * 第二个参数:表示请求路径 如标签a的href
 * 第三个参数:表示是否使用异步 可以不写 默认true即开启异步,实际开发中没有使用false的
 */
xhr.open("GET", "/webpath/", true);
xhr.send();

3、使用回调函数onreadystatechange处理相应结果

/*
 * onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
 * readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪
 * status:服务器状态码,常用的如 200:服务器响应正常 404:无法找到请求的资源 500:服务器内部错误
 */
    xhr.onreadystatechange =  function () {
          if (xhr.status == 200 && xhr.readyState == 4) {
            //请求成功 会进入这里 处理逻辑
          }
        };
例子

1、ajax1.html
简单的get带参请求

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a href="/ajax?name=scy">scy</a>
    <p></p>
    <script type="text/javascript">
      const pDom = document.querySelector("p");
      const aDom = document.querySelector("a");
      aDom.addEventListener("click", function (event) {
        event.preventDefault();
        const href = event.target.getAttribute("href");
        let xhr = new XMLHttpRequest();
        xhr.open("GET", href);
        xhr.onreadystatechange =  function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
          pDom.innerText = xhr.response;
        }
      };
        xhr.send();
      });
    </script>
  </body>
</html>

2、ajax2.html
简单POST处理上传文件的用法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="file" multiple>
    <p></p>
    <script type="text/javascript">
      const inputDom = document.querySelector("input");
      const pDom = document.querySelector("p");
      inputDom.addEventListener("change", function (event) {
        const formData = new FormData();
        for (let file of event.target.files) {
          formData.append("mFiles", file);
        }
        formData.append("age", 19);//formdata添加参数
        upload(formData);
      });
      function upload(formData) {
        console.log(formData);
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/ajax/");
        // xhr.responseType = "json";//请求类型 默认字符串型
        xhr.onreadystatechange = function () {
          if (xhr.status == 200 && xhr.readyState == 4) {
            console.log(typeof xhr.response);//string
            //console.log(JSON.stringify(xhr.response));//如果是其他类型如JSON 可以做相应处理
            pDom.innerText = xhr.response;//字符串类型 也可以写成xhr.responseText
          }
        }
        xhr.send(formData);//发送参数数据
      }
    </script>
  </body>
</html>

下面是服务器端的简单处理,用node.js书写:

const router = require("express").Router();
const multer = require("multer");
const upload = multer({
  dest:"upload/"
});
const arrMid = upload.array("mFiles", 4);
//响应ajax1.html的请求
router.get("/", function (req, res) {
  res.send(req.query.name);
});
//响应ajax2.html的请求
router.post("/", arrMid, function (req, res) {
  let obj = {};
  let {age} = req.body;
  obj[age] = req.files;
  res.send(obj);
});
module.exports = router;

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹