Ajax的学习

最新推荐文章于 2025-05-12 11:02:49 发布

Maybe_do_it

最新推荐文章于 2025-05-12 11:02:49 发布

阅读量104

点赞数

文章标签： ajax 服务器

本文链接：https://blog.youkuaiyun.com/Maybe_do_it/article/details/121796511

版权

本文将深入解析Ajax在前端开发中的应用，讲解如何利用jQuery简化异步请求，包括GET和POST方法，以及如何通过$.ajax设置详细参数，以实现动态更新用户界面。通过实例演示检测用户名注册的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax

Ajax是客户端与服务器进行交互时，可以不必刷新整个浏览器的情况下，与服务器进行异步通讯的技术
例如获取验证码的操作就是一个异步的请求

作用

Ajax可以实现异步更新，只更新局部页面

异步与同步

浏览器访问服务器的方式
- 同步访问：客户端必须等待服务器的响应，等待过程中不能进行其他操作
- 异步访问：客户端不需要等待服务器的响应，等待期间浏览器可以进行其他操作

jQuery框架的ajax

jquery对js原生的ajax进行了封装。
常用的jquery方法有： POST GET AJAX

GET请求方式

通过远程 HTTP GET 请求载入信息
Get请求方式语法

$.get(url,data,callback,type)

参数1: url 请求路径
参数2: data 请求时携带的数据
格式: key=value 或者 {username=’baby’,pwd:666}
参数3: callback 响应成功后的回调函数
参数4: type 响应的数据类型 text html xml json

function run2(){
            //1.url
            var url = "/login";

            //2.数据
            var data = {username:"jack"};

            //3.发送GET请求
            $.get(url,data,function (param){
                alert("GET异步请求响应成功"+param);
            },"text")
        }

Post请求方式

Post请求方式语法
$.post(url,data,callback,type)
里面的四个参数和get方式是一样, 不一样的是请求方式的不同

//POST方式
        function run3(){
            //1.url
            var url = "/login";

            //2.数据
            var data = {username:"lucy"};

            //3.发送GET请求
            $.post(url,data,function (param){
                alert("POST异步请求响应成功"+param);
            },"text")

Ajax请求方式

$.ajax()方法可以更加详细的设置底层的参数
ajax请求方式语法:
方式2: $.ajax({})

//Ajax方式
        function run4(){
            $.ajax({
                url:"/login",
                async:true, //是否异步
                data:{username:"zhangfei"},
                type:"POST", //请求方式
                dataType:"text", //返回数据的数据类型
                success:function (param) {
                    alert("响应成功!! " + param)
                },error:function(){
                    alert("响应失败1");
                }
                }
            );
        }