Ajax异步请求

Posted 2020-08-31

业精于勤，荒于嬉；行成于思，毁于随。

　　　　　　　　　　　　----致自己

目录：

二、jQuery四种常用的Ajax请求方式简介

1.$.ajax()

2.$.get()

3.$.post()

4.$.getJSON()

==================1.$.ajax()========================

jQuery在异步请求方面封装的较好，直接使用Ajax比较麻烦，jQuery大大简化了我们的使用，不用考虑浏览器之间的差异了。

$.ajax()是jQuery底层ajax的实现，$.get()、$.post()是简单易用的高层实现。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

默认情况下ajax使用get请求，如果需要使用post请求，可以通过设置type参数值来实现

$.ajax({ type: "POST", url: "test.js", dataType: "script"});

$.ajax({
    type:"POST",
    url:"/user/demo.text",
    dataType:"html"
    success:function(data){
        if(data.success){
           //do something    
         }            
    }
    
});

这种形式参数有很多，具体可以网上搜一下，这里演示的只是简单的demo。

==================2.$.get()=========================

通过远程HTTP GET请求载入信息。。如果需要在出错时执行函数，请使用 $.ajax。

$.get(
        "/user/demo.text",
        {name:"张三",age:"24"},
         function(data){
           alert(data);
        }       
);

这是一个简单的 GET 请求功能以取代复杂 $.ajax,请求成功时可调用回调函数。

参数说明：$.get(url,data,callback);

url(String):发送请求的URL地址。

data(Map):可选，要发送给服务器的数据，以key/value形式的键值对，会作为QueryString附加到URL后面。

　　　　　　因为各个浏览器对于get请求参数长度有限制，IE最大允许为2k+35

callback(function):(可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

==================3.$.post()========================

通过HTTP post请求载入信息。

$.post(
         "/user/demo.do",
         {name:"李四",age:"26"},
          function(data){
            //do something
          },
          "json"
);

这是一个简单的 POST 请求功能以取代复杂 $.ajax,请求成功时可调用回调函数。

参数说明：$.post(url,data,callback，type);

url(String):发送请求的URL地址。

data(Map):可选，要发送给服务器的数据，以key/value形式的键值对，会作为QueryString附加到URL后面。

callback(function):可选 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type(String):可选 这里指的是发送的数据格式，如：xml、json、jsonp等

上面例子中设置了向服务提交的数据格式为json格式。此时服务端应设置响应的ContentType.     response.setContentType("application/json;charset=utf-8");

==================4.$.getJSON()======================

通过HTTP get请求载入json格式的数据

$.getJSON("o_content.do?jsoncallback=?",function(data) {
        if(data.success) {
            alert(data.count);
        } else {
            alert(data.msg);
        }
    });

ajax应用确实挺多的，最近的一个项目使用ajax技术所以记录一下，下一篇是使用ajax进行跨域请求。