JS-Ajax

最新推荐文章于 2024-05-22 09:41:32 发布

rfalcon

最新推荐文章于 2024-05-22 09:41:32 发布

阅读量85

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/rfalcon/article/details/105986832

版权

JS 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

Ajax学习笔记

Ajax

异步的JavaScript 和 xml（数据传输文件）。Ajax是前后端数据交互的搬运工，都可以异步执行

数据传输格式

xml数据传输格式（大型的门户网站新浪、网易、凤凰网等）

优点：
1. 种类丰富
2. 传输量非常大
缺点：
1. 解析麻烦
2. 不太适合轻量级数据

JSon数据传输格式（字符串）（移动端应用居多。美团、饿了么等）

优点：
1. 轻量级数据（相对xml）
2. 解析比较轻松
缺点：
1. 数据种类比较少
2. 传输数据量比较少
  JSON.parse()
  JSON.stringify()

同步和异步

同步：阻塞。当前程序的运行，必须等前一个程序运行完毕以后，才能运行
异步：非阻塞。当前程序的运行，和前面程序的运行没有任何关系

try…catch (更多用在代码调试和后期维护)

try{
	尝试执行的代码
}catch(error){
	error 错误对象,try括号中代码执行的异常信息;
	补救代码;
}
执行过程：
	1.先去执行try中的代码
	2.如果try中代码执行正常，catch中的代码就不执行
	3.如果try中代码执行异常，直接执行catch中的代码进行补救
try{
	alert("异常前");
	//alert(num);
	alert("异常后");
}catch{error}{
	alert("补救代码，Error："+error);
}

try…throw…catch (throw指的是手动抛出异常)

try{
	尝试执行的代码
	throw new Error("异常信息文本");
}catch(error){
	error 错误对象,try括号中代码执行的异常信息;
	补救代码;
}
try{
	alert("异常前");
	throw new Error("error");
	alert("异常后");
}catch{error}{
	alert("补救代码，Error："+error);
}

例子：Ajax下载数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function () {
        /*
            XMLHttpRequest IE8以下不兼容
            IE8以下声明Ajax的方法为
            ActiveXObject("microsoft.XMLHTTP");
         */
          //1.创建Ajax对象
          /* var xhr = new XMLHttpRequest(); */
          var xhr = null;
          try{
            xhr = new XMLHttpRequest();
          }catch(error){
            xhr = new ActiveXObject("microsoft.XMLHTTP");
          }
          
          //2.调用open
          /*
          		第一个参数：请求方式（get、post）
               	第二个参数：URL（完整URL或相对路径）
             	第三个参数：是否异步（true异步，Flase同步）
          */
          xhr.open("get", "1.txt", true);
          /*
          ajax的get提交 （通过查询字符串获取）
          	xhr.open("get","get.php?username=falcon&age=18&password=123",true);
          */
          /*
          ajax的post提交
          	xhr.open("post","post.php",true);
          	xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
          	xhr.send("username=falcon&age=18&password=123");
          【注】其通过send传递参数,且在send方法之前要设置请求的格式
          ?name1=value1&name2=value2	search
          name1=value1&name2=value2		querystring
          */
          
          //3.调用send
          xhr.send();
          
          //4.等待数据响应
         /* 
            readystatechange 事件类型
            xhr.readyState属性  发生变化时候调用（请求状态）
            0   （初始化）调用open方法之前
            1   （载入）已调用send()方法，正在发送请求
            2   （载入完成）send()方法完成，已收到全部响应内容
            3   （解析）正在解析响应内容
            4   （完成）响应内容解析完成，可以在客户端调用
          */
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
            	//判断本次下载的状态码是多少
            	if(xhr.status == 200){
              		alert(xhr.responseText);
              	}else{
              		alert("Error:"+xhr.status);
              	}
            }
          };
        };
      };
    </script>
  </head>
  <body>
    <button id="btn1">下载数据</button>
  </body>
</html>

HTTP状态码（常用） ajax.status

200 — — 交易成功
404 — — 没有发现文件、查询或URL
400 — — 错误请求，如语法错误

表单的GET和POST请求

action 点击submit以后跳转到的URL
method 表单提交数据的方式
1. get 默认get
  提交方式：通过问号直接将数据拼接在URL后面进行提交？查询字符串
  好处：简单
  缺点：不安全；地址栏有上限（2kb）；没法实现上传
2. post
  提交方式：post提交通过浏览器内部进行提交
  好处：安全；理论上没有上限；可以上传
  缺点：比get复杂

get请求

//get.php
header('content-type:text/html;charset="utf-8"');
/*
	$_GET（全局的关联数组）	存放通过get提交的所有数据
	$_POST（全局的关联数组）	存放通过post提交的所有数据
*/
$username = $_GET['username'];
$age = $_GET['age'];
$password = $_GET['password'];
echo "你的名字：{$username}，年龄：{$age}，密码：{$password}";

<form action="get.php" method="get">
	<input type="text" name='username' placeholder="用户名"/>
    <input type="text" name='age' placeholder="年龄"/>
    <input type="password" name='password' placeholder="密码"/>
    <input type="submit"/>
</form>

post 请求

//post.php
header('content-type:text/html;charset="utf-8"');
/*
	$_GET（全局的关联数组）	存放通过get提交的所有数据
	$_POST（全局的关联数组）	存放通过post提交的所有数据
*/
$username = $_POST['username'];
$age = $_POST['age'];
$password = $_POST['password'];
echo "你的名字：{$username}，年龄：{$age}，密码：{$password}";

<form action="post.php" method="post" enctype="application/x-www-form-urlencoded">
	<input type="text" name='username' placeholder="用户名"/>
    <input type="text" name='age' placeholder="年龄"/>
    <input type="password" name='password' placeholder="密码"/>
    <input type="submit"/>
</form>

Ajax函数的封装

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /*
          success 数据下载成功以后执行的函数
          error 数据下载失败以后执行的函数
       */
        function $ajax({ method = "get", url, data,success,error}) {
          //1.创建Ajax对象
          var xhr = null;
          try {
            xhr = new XMLHttpRequest();
          } catch (error) {
            xhr = new ActiveXObject("microsoft.XMLHTTP");
          }

          //判断如果数据存在
          if(data){
              data = querystring(data);
          }

          if (method == "get" && data) {
            url += "?" + data;
          }

          //2.调用open
          xhr.open(method, url, true);

          //3.调用send
          if (method == "get") {
            xhr.send();
          } else {
            xhr.setRequestHeader(
              "content-type",
              "application/x-www-form-urlencoded"
            );
            xhr.send(data);
          }

          //4.等待数据响应
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
              //判断本次下载的状态码是多少
              if (xhr.status == 200) {
                  /*
                      如何去处理数据操作不确定
                      回调函数
                   */
                success(xhr.responseText);
              } else {
                  if(error){
                      error("Error:" + xhr.status);
                  }
              }
            }
          };
        }

        //querystring函数封装，将对象转换为查询字符串
        function querystring(obj){
            var str = "";
            for(var arr in obj){
                str += attr + "=" + obj[attr]+"&";
            }
            return str.substring(0,str.length-1);
        }

        window.onload = function () {
          var oGetBtn = document.getElementById("getBtn");
          var oPostBtn = document.getElementById("postBtn");
          //1.get请求
          oGetBtn.onclick = function () {
            $ajax({
              url: "get.php",
              data: {
                  username:"falcon",
                  age:18,
                  password:"123"
              },
              success:function(result){
                  alert(result);
              },
              error:function(msg){
                  alert(msg);
              }
            });
          };

          //2.post请求
          oPostBtn.onclick = function () {
            $ajax({
              method: "post",
              url: "post.php",
              data: {
                  username:"falcon",
                  age:18,
                  password:"123"
              },
              success:function(result){
                  alert(result);
              },
              error:function(msg){
                  alert(msg);
              }
            });
          };
        };
    </script>
  </head>
  <body>
    <button id="getBtn">GET请求</button>
    <button id="postBtn">POST请求</button>
  </body>
</html>