jQuery的ajax详解

Posted 2020-09-14

很多朋友都喜欢用JQ 而ajax更是JQ里必不可少的 下面为大家详细介绍一下JQ的ajax

首先 什么是ajax：

AJAX = 异步 javascript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、html、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

第一种

$("#id").load()

这算是比较常见的一种JQ的ajax的写法  通过ID找到dom节点 然后等页面加载完毕之后通过aja请求数据

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中

load(url,data,function(response,status,xhr))

一共有三个参数

url：规定要将请求发送到哪个 URL

data：可选。规定连同请求发送到服务器的数据，通常情况下如果只是简单的请求数据这个参数可以忽略

function(response,status,xhr)：可选。规定当请求完成时运行的函数。请求完成后将要实现的函数。

虽然是可选 但是通常情况下都会写的，因为请求数据回来之后总是要操作数据做点什么对吧。

eg：

$("button").click(function(){
  $("div").load(‘demo_ajax_load.txt‘);
});

第二种

$.get();

相信对ajax稍微有点了解的朋友都知道get和post 那么同样的 JQ里面也少不了他们两个

使用get方法需要先知道你所要请求的数据是json类型还是JSONP类型

如果是json：

$.get("http://datainfo.duapp.com/shopdata/getclass.php",function(data){            console.log(data)        })

JSONP：

$.get("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",function(data){
            console.log(data)
        },"JSONP");
$.get("http://datainfo.duapp.com/shopdata/getCar.php",{userID:"f66"},function(data){
            console.log(data)
        },"JSONP")

对于JSONP这两种写法的区别就在于传递参数的方式，第一种是直接在后面加？然后写数据，第二种是逗号隔开之后在大括号里写

第三种

$.post(URL,data,callback);

必需的 URL 参数规定希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名

和get方法差不多  post也有不同的写法

$.post("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",function(data){            console.log(data)        },"JSONP");        $.post("http://datainfo.duapp.com/shopdata/getCar.php",{userID:"f66"},function(data){            console.log(data)        },"JSONP")

具体区别和上面get方法一样

下面给大家说说get和post的区别

Get:
用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。

Post:
当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。

第四种

$.ajax();

这种方法估计是大家最常用到的，因为在大多数编译软件中例如Hbuilder，直接会出现类似的提示

$.ajax({
      type:"get",
      url:"",
      async:true
  });

而根据这个大家也很容易猜到这些参数的意义，需要注意的是async 这个是用来判断同步异步的，通常情况下大家可以不用理会，直接删掉就好，这时候可能有朋友会问了，成功之后的函数写到哪里，别着急，看下面

$.ajax({
      type:"get",
      url:"",      function(data){
            console.log(data)      
        }
  });

只要这样就可以在这个function函数内对请求回来的数据进行操作了。

第五种

$.getJSON();

这种方法可能大家不是很常见，但是不得不说这种方法是最简洁也可以说是最方便的一种方法

$.getJSON("http://datainfo.duapp.com/shopdata/getCar.php?userID=f66&callback=?",function(data){           console.log(data)        })

    $.getJSON("pro.json",function(data){            console.log(data)            sortPrice(data);            data.sort(function(a,b){               return a.price - b.price;            })           console.log(data)                    })

如果大家是从上面一直看到这里的相信很容易理解这两种写法是做什么的  没错 第一种是为了请求JSONP第二种是常规json数据

可能有朋友就不理解了，到底什么是JSONP什么是JSON，这个问题如果讨论起来那就又是另一个话题了 在这里大家只需要知道你所要请求的数据

是什么类型的就好，通常在接口里都会给你说明的，而在ajax里怎么用也比较好区分，就是JSONP会加?callback=而json不需要，所以当你看见？的时候

那么没错了 他就是JSONP

第六种

$.getScript();

这种方法就厉害了，可能前五种方法大家只能请求数据，那么我问大家，当大家想引用一个js文件的时候会怎么做呢？

是不是直接引用script标签引入，这里这种方法可以避免使用标签

$("#btn").click(function(){
            $.getScript("test.js",function(){
                setTimeout(function(){
                    alert(2)
                },2000)
            })
        });

这样就可以直接引用test.js了。

然后再给大家说一说使用ajax中常见的一些问题及解决方法

使用Post方式需注意：
1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量. 通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。例：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18，注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null);

4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"];

AJAX乱码问题

产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是utf-8，如果客户端页面是gb2312或者其它编码数据就会产生乱码
2、post方法提交数据默认的字符编码是utf-8，如果服务器端是gb2312或其他编码数据就会产生乱码

解决办法有：
1、若客户端是gb2312编码，则在服务器指定输出流编码
2、服务器端和客户端都使用utf-8编码