AJAX复习（异步请求）

安安啦

于 2024-10-16 10:00:00 发布

阅读量870

点赞数 13

文章标签： ajax 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_63843408/article/details/142957261

版权

AJAX

概念

AJAX 是 Asynchronous JavaScript And XML 的简称，AJAX 技术指的是通过 异步请求的方式，进行页面无刷新式提交，实现页面局部数据的更新。

请求处理模式：客户端提交请求 -> 服务器进⾏处理 -> 服务器处理完毕，返回结果给客户端

同步请求：在服务器处理请求期间，客户端不能做任何事情，只有收到服务器的反馈后，才可提交新请求。

异步请求：在服务器处理请求期间，客户端无需等待服务器的反馈，可以同时做其他事情，提交新的请求。

实现Ajax的步骤

创建 XMLHttpRequest 对象 xhr
给 xhr.onreadystatechange 事件绑定回调函数，以指定 xhr 对象状态改变时调用哪个js函数进行处理
建立与服务器的连接
发送请求

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

//2.绑定回调函数
xhr.onreadystatechange = function(){
	// readyState 是表示xhr对象状态的属性，4代表客户端读取响应结束,3表示开始读取响应
    if (xhr.readyState == 4) {
        if (xhr.status == 200) { // 信息已经成功返回，开始处理信息
            var result = xhr.responseText;
            //...
        }
    }
}

//3.建立与服务器的连接
xhr.open("POST", url, true);//是否异步处理请求,true（异步）或 false（同步）。xhr对象如果要用于 AJAX 请求，open() 方法的 async 参数必须设置为 true.

//4.发送请求
//使用 POST 请求方式，必须加下面这句；使用 GET 则不需要
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送请求，参数为请求参数，null代表无请求参数,仅用于 POST请求（如："name=libai"）。GET方式欲传参，请放在url中。
xhr.send(null);

xhr.readyState 常见状态

0：请求未初始化（未建立连接），还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。

xhr.status 常见状态

200：服务器成功处理了请求

301：请求的资源移到了新的位置

404：没有找到资源

500：服务器产生内部错误

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人类阅读和编写，同时也易于机器解析和生成。下面是一些关于 JSON 的基本信息和示例。

JSON 基本结构

对象：由 {} 表示，一组以键值对形式存储的数据。
{ "name": "John", "age": 30, "city": "New York" }
数组：由 [] 表示，包含一组有序的值。
[ "apple", "banana", "cherry" ]
数据类型：
- 字符串：必须用双引号包围，如 "Hello"
- 数字：如 42
- 布尔值：true 或 false
- 空值：null
- 对象：如上面所示
- 数组：如上面所示

JSON 示例

以下是一个包含多种数据类型的 JSON 示例：

{ "person": { "name": "Alice", "age": 25, "isStudent": false, "courses": ["Math", "Science"], "address": { "street": "123 Main St", "city": "Anytown" } }, "favoriteColors": ["red", "green", "blue"], "isActive": true, "balance": null }

JSON 的使用场景

数据交换：在客户端和服务器之间传输数据。
配置文件：用于存储应用程序的配置信息。
API 响应：许多 RESTful API 使用 JSON 格式返回数据。

如何处理 JSON

在 JavaScript 中，你可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象，使用 JSON.stringify() 方法将对象转换为 JSON 字符串。例如：

// JSON 字符串 const jsonString = '{"name":"John","age":30}';

// 转换为对象 const obj = JSON.parse(jsonString); console.log(obj.name); // 输出: John

// 转换为 JSON 字符串 const newJsonString = JSON.stringify(obj); console.log(newJsonString); // 输出: {"name":"John","age":30}

jQuery 实现 AJAX

jQuery 中通过 $.get()、$.post()、$.getJSON()、$.ajax()等方法，都可以实现 Ajax请求。

准备工作（下文需要）：

<form>
    <input type="text" id="name" placeholder="用户名">
    <input type="password"  id="pwd" placeholder="密码">
    <input type="button" value="登录" id="login">
</form>

$.post()

语法：$.post(url,[params],[fn],[type])，方法名 post 表明这是一个 POST 请求。

url:发送请求地址。

params:待发送 key/value 参数。

fn:发送成功时回调函数。

type:服务器返回数据格式：xml, html, script, json, text。

/*
    回调函数的形参 data 为请求 url 后，服务器返回的数据; 
    参数 json 则指明返回的 data 为 json 格式。
*/
let url = "/user/login";
let data = {name:$("#name").val(),pwd:$("#pwd").val()}
$.post(url,data,function(data){
    console.log(data);
},"json");

$.get()

语法：$.get(url,[params],[fn],[type])，方法名 get 表明这是一个 GET 请求。除了方法名与$.post()不同外，用法上二者相同。

$.getJSON()

语法：$.getJSON(url,[params],[fn])，方法名已经表明这是一个 GET 请求，且返回的内容格式为JSON.

let url = "/user/login";
let data = {name:$("#name").val(),pwd:$("#pwd").val()}
$.getJSON(url,data,function(data){
    console.log(data);
});

$.ajax()

$.ajax() 为 jQuery 的原始 ajax 实现，上面三种请求方式（ $.get()、$.post()、$.getJSON()）都是此方式的简化版。一个比较常见的 $.ajax() 用法如下：

$.ajax({
    type:"get",             // 请求方式
    url:"/user/login",      // 请求url
    data:{                  // 请求参数
        name:$("#name").val(),
        pwd:$("#pwd").val()
    },  
    async:true,             // 设为异步请求（默认）;如果设置为 false,则表示为同步请求。
    dataType:"json",        // 服务器返回数据的格式
    success:function(data){ // 请求响应成功后，执行的回调函数
        console.log(data);
    }
});

AJAX 案例 - 注册

需求：

已知注册表单中有一个用户名输入框，一个密码框，一个注册按钮。
当输入用户名，鼠标从用户名输入框失去焦点后，立即检查该用户名是否已被注册，即数据库表中是否已有该用户名。
当输入密码，鼠标从密码框失去焦点后，立即检查密码是否是6位数字。
当点击注册按钮时，再次检测用户名和密码是否符合上述要求。此举是为防止用户不输入用户名密码，直接点击注册按钮。
数据库中的用户数据用 JSON 文件模拟。

用户数据 users.json

[
    {
        "name":"libai",
        "pwd":123456
    },
    {
        "name":"dufu",
        "pwd":666666
    },
    {
        "name":"wangbo",
        "pwd":999999
    }
]

注册表单

<form>
    <input type="text" name="name" id="name" placeholder="用户名" οnblur="checkName()">
    <input type="password" name="pwd" id="pwd" placeholder="密码" οnblur="checkPwd()">
    <input type="button" value="注册" id="register">
</form>

JQuery 实现

// 校验 用户名
function checkName(){
    var name = $("#name").val();
    if(name == ""){
        alert("用户名不能为空");
        return false;
    }
    var flag = true;//标志用户名是否已被注册（默认未被注册）
    $.ajax({
        type:"get",
        async:false,//设为同步请求,保证请求执行完毕，方法才返回值（异步会出现请求还没结束，方法已返回值）
        url:"users.json",
        dataType:"json",
        success:function(users){
            for (var i = 0; i < users.length; i++) {
                if(name == users[i].name){
                    alert("用户名已被注册");
                    flag = false;
                    break;
                }
            }
        }
    });
    return flag;
}

// 校验 密码
function checkPwd(){
    var pwd = $("#pwd").val();
    if(/^\d{6}$/.test(pwd) == false){
        alert("密码必须是6位数字！")
        return false;
    }else{
        return true;
    }
}

$("#register").click(function(){
    //检验用户名、密码
    if(checkName() && checkPwd()){
        alert("用户名、密码都正确，开始注册");
    }
});