jquery中的ajax使用

Ajax

即"Asynchronous JavaScript And XML"（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
·
·

优缺点

优点

减轻服务器的负担，按需取数据，最大程度的减少冗余请求，局部刷新页面，减少用户心理和实际的等待时间，带来更好的用户体验。

缺点

ajax大量的使用了javascript和ajax引擎,这些取决于浏览器的支持,在编写的时候考虑对浏览器的兼容性。AJAX只是局部刷新,所以页面的后退按钮是没有用的。

·
·

$.ajax 方式

语法

$.ajax({
    url:URL,//相对路径：相对于当前路径；也可以使用绝对路径http：……
    method:get|post,
    data:data,//格式为"k="+v，或者{"k":"v",……}
    success:function(result){//result为返回结果

    },
    error:function(){//运行错误会执行此方法

    }
})

例子

//js代码
$.ajax({
    url:"test",
    method:"post",
    data:{"a":"1","b":"2"},//传递两个参数a和b
    success:function (msg,sta) {
        alert(msg)//返回的是"yes"
        alert(sta)//成功为"success"
    },
    error:function () {
        alert("error")
    }
})

//控制层代码
@ResponseBody
@RequestMapping("/test")
public String test(String a,String b){
    System.out.println(a+"---"+b);//成功打印出1---2
    return "yes";
}

get与post方法

get与post除了请求方式以外，其他都一样

语法

$.get(url,参数,function (meg) {
    //参数格式为："k="+v，或者{"k":"v",……}，get请求方式还可以在url后面拼接参数
    //meg为控制层返回的字符串信息
},
预期返回值类型//可以省略不写，"xml"|"json"|"text"
)

例子

//js代码
$.get("test",{"a":"1","b":"2"},function (msg) {
     alert(msg)//返回的是"yes"
})

//控制层代码
@ResponseBody
@RequestMapping("/test")
public String test(String a,String b){
    System.out.println(a+"---"+b);//成功打印出1---2
    return "yes";
}

load方法

可以直接将控制层返回的数据插入到选中的标签中

语法

$(选中的标签).load(url,参数,function (meg) {
    //参数格式为："k="+"v&……"，或者{"k":"v",……}
    //meg为控制层返回的字符串信息
})
//function通常都会省略不写

例子

//js代码
$("#showMeg").load("test",{"a":"1","b":"2"})

//控制层代码
@ResponseBody
@RequestMapping("/test")
public String test(String a,String b){
    System.out.println(a+"---"+b);//成功打印出1---2
    return "yes";//可以使用html标签
}

//结果是id为showMeg的标签中出现红色是yes

getJSON方法

传入json数据，返回也是json数据

语法

$.getJSON(url,参数,function (meg) {
    //参数格式为：{"k":"v",……}
    //meg为控制层返回的字符串信息，为json格式{"k":"v",……}
})

例子

//js代码
$.getJSON("test",{"a":"1","b":"2"},function (msg) {
    alert(msg.myname)//结果为yes
})

//控制层代码
@ResponseBody
@RequestMapping("/test")
public String test(String a,String b){
    System.out.println(a+"---"+b);//成功打印出1---2
    return "{\"myname\":\"yes\"}";//要返回json数据
}

·
·

详细参数

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
context	为所有 AJAX 相关的回调函数规定 “this” 值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
success(result,status,xhr)	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	000 用于创建 XMLHttpRequest 对象的函数。

~~ 做项目时，使用到了ajax，就再次将ajax复习一次，并将其做了次小整理，希望也对大家有帮助。