Ajax基础

最新推荐文章于 2024-09-15 19:20:58 发布

stay calm~

最新推荐文章于 2024-09-15 19:20:58 发布

阅读量1.1k

点赞数

分类专栏： h5 文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/qq_50352386/article/details/122789573

版权

h5 专栏收录该内容

34 篇文章 5 订阅

订阅专栏

4，使用Ajax引擎对象发送get或者post请求

4.1 发送get请求的步骤

4.2 xhr.readState 五种状态

4.3 xhr.status http响应状态码

1，Ajax介绍

1.1 什么是Ajax

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript，XHTML和CSS、DOM、XML和XMLHttpRequest.通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.2 Ajax优缺点

优点：（1）无刷新页面，局部刷新

（2）减少用户心理等待时间

（3）减少服务器压力和网络压力

缺点：对搜索引擎不友好

2，Ajax的工作原理

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

3，创建Ajax引擎对象

3.1 Ajax引擎概念

Ajax引擎是Ajax综合技术的核心，作为浏览器页面和服务器交互的一个桥梁

3.2 如何创建一个Ajax引擎

非IE浏览器和高版本浏览器

var obj= new XMLHttpRequest()

4，使用Ajax引擎对象发送get或者post请求

4.1 发送get请求的步骤

（1）创建一个Ajax对象

var xhr= new XMLHttpRequest()

（2）请求地址

        xhr.open("GET","请求地址")

（3）监听请求和响应数据

xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    //请求成功  返回响应数据
    console.log(xhr.responseText)
  }
}

（4）发送

        xhr.send()

4.2 xhr.readState 五种状态

0：请求初始化

1：服务器连接已建立

2：请求已连接

3：请求处理中

4：请求已完成，且响应以就绪

4.3 xhr.status http响应状态码

200 成功 404 访问资源找不到

304 从浏览器缓存中拿取数据 403 权限不够

500以上服务器内部错误

4.4 ajax4看

1，看请求地址

2，看请求方式和响应状态码

3，看请求参数

4，看响应数据

4.5 原生js发送post请求的方式

（1）创建一个Ajax对象

var xhr= new XMLHttpRequest()

（2）请求地址

        xhr.open("POST","请求地址")

（3）设置请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//仿form表单提交给服务器

（4）监听请求和响应数据

xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    //请求成功  返回响应数据
    console.log(xhr.responseText)
  }
}

（5）发送

    xhr.send('name=value&name1=value1')

4.6 jq发送get和post请求

<script src="./jquery.js"></script>
<script>
   //jq发送get请求
    $.get("http://139.9.177.51:3333/api/testGet?name=lisa",function(res){
        console.log(res)
    })
    //jq发送post请求
    $.post("http://139.9.177.51:3333/api/testPost",'name=lisa',function(data){
        console.log(data)
    })
</script>

4.7 jq万能发送post和get请求

$.ajax({
        url:"请求地址",
        data:"请求参数",
        type:"请求类型get或者post",
        dataType:"响应回来的数据类型（JSON）",
        success:function(res){
            console.log(res)
        },
        error:function(res){
            console.log(res)
        }
    })

5，同步和异步

ajax同步请求，是指当前端通过ajax发送一个请求到服务端，JavaScript 会等到服务器响应就绪才继续执行。

异步请求：ajax发送请求后，JavaScript 无需等待服务器的响应，继续执行接下来的代码，等到响应成功以后，执行响应的结果；

6，JSON在Ajax中的应用

（1） JSON是js的内置对象

（2）key值必须是双引号引起来

（3）value值是字符串必须用双引号引起来

（4）不能写注释

（5）不能写注释

（6）JSON 2个核心方法（掌握）

将字符串转换为对象：JSON.parse()

把对象转换为字符串：JSON.stringify()

（7）轻量级数据，主要用于前后端数据交换（ajax）

7，Ajax应用（邮箱注册验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .error{
        color: red;
        font-size: 12px;
    }
</style>
<body>
    <p>
        邮箱 <input type="email" name="" id="email"><span></span>
    </p>
    <p>
        <button type="button" id="reg_btn">注册</button>
    </p>
</body>
<script src="./jquery.js"></script>
<script>
    //form表单默认同步提交
    //邮箱失去焦点事件
    $('#email').blur(function(){
        //获取email值
        let emailvalue=$(this).val();
        //正则表达式
        if(/^[a-zA-Z0-9][a-zA-Z0-9_]+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,5}(\.[a-zA-Z]{2,5})*$/i.test(emailvalue)){
            //发送ajax请求 判断邮箱是否重复
            $.ajax({
                url:"http://139.9.177.51:3333/api/emailExist",
                type:"post",
                data:"email="+emailvalue,
                dataType:"json",
                success:function(res){
                    console.log(res)
                    if(res.code===200){
                        //可用
                        $("#email").next().html("邮箱可用").removeClass("error"); 
                    }else{
                        //重复
                        $("#email").next().html("邮箱重复了").addClass("error");
                    }
                }
            })
        }else{
            $(this).next().html("邮箱格式不合法").addClass("error");
        }
    })
    $('#reg_btn').click(function(){
        //调用后端注册邮箱接口 发送ajax
        $.ajax({
            url:"http://139.9.177.51:3333/api/reg",
            type:"post",
            data:"email="+$("#email").val(),
            dataType:"json",
            success:function(res){
                if(res.code===200){
                    alert("注册成功")
                }else{
                    alert("注册失败")
                }
            }
        })
    })
</script>
</html>