jQuery方式实现Ajax异步请求

2021-05-20 20:18发布

Ajax简介

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。


  --  同步方式与异步方式区别

同步方式发送请求 :发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会处于一直等待过程中。

异步方式发送请求 : 发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。


  --  jQuery方式实现异步

请求方式语法
Ajax请求$.ajax([settings])
GET请求$.get(url, [data], [callback], [type])
POST请求$.post(url, [data], [callback], [type])

    

  --  Ajax请求

语法格式:

$.ajax({

url:"",

data:{ "键1" : 值1 , "键2" : 值2 , "键3" : 值3 },

type:"post/get",

async:true,

dataType:"text",

success:function(obj){},

error:function(){}

})



 属性解析:

参数名称描述
url请求的服务器端url地址, 与form表单中的action一样,都是代表请求的路径
data前台需要向后台传递的数据(键值对形式)
type和form表单中method对应,代表请求类型 get/post
async取值是布尔类型true/false,分别表示异步和同步,默认为true(异步),一般不建议写
dataType回传的数据类型。text、xml、html、json...
success成功的回调函数,参数obj表示返回值
error失败的回调函数,一般不写


    注意事项:

1、每个属性后都要跟随一个英文逗号,最后一个不用。

2、每一个属性都是键值对的形式存在,中间用英文冒号:隔开

3、data:{} 是一个特殊的写法,值是一个{},里面使用键值对存储

例如:data:{“键1”:值1, “键2”:值2, “键3”:值3}

4、以上属性没有先后顺序要求


例:

-- jsp网页端

()() {
        $.({
            ::{:$().()}:::(resp){
                $().(resp)}
        })}


-- Servlet服务器端

()
CheckUserName HttpServlet {
    (HttpServletRequest reqHttpServletResponse resp) ServletExceptionIOException {
        req.setCharacterEncoding()resp.setContentType()String name = req.getParameter()System..println(name)(name.equals()||name.equals()){
            resp.getWriter().print()}{
            resp.getWriter().print()}
    }
}


   -- GET或POST请求

语法格式:        $.get | post(url, [data], [callback], [type]);

属性解析:

参数名称描述
url请求的服务器端url地址, 与form表单中的action一样,都是代表请求的路径
data前台需要向后台传递的数据(键值对形式)
callback当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
type预期的返回数据的类型,取值可以是 text、xml、html、json...

注意事项:这种写法功能和$.ajax是一样的,但是严格要求属性顺序。


  --  $.ajax与$.get|$.post异同


相同点:

都是jQuery封装的方法实现异步交互。

不同点:

1,$.ajax()是jQuery的第一次封装,使用时稍显麻烦,但是功能强大,覆盖了get和post请求,有错误调试能力,写法顺序可以改变。

2,$.post()和$.get()是jQuery Ajax的第二次封装,写法更加简化,功能是相同的没有区别。但是顺序不能改变。


例:

() {
        $.({:$().()}(data) {$().(data)})}