jQuery的ajax详解

 

不少朋友都喜欢用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乱码问题

产生乱码的缘由:
一、xtmlhttp 返回的数据默认的字符编码是utf-8，若是客户端页面是gb2312或者其它编码数据就会产生乱码
二、post方法提交数据默认的字符编码是utf-8，若是服务器端是gb2312或其余编码数据就会产生乱码

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

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');

 

原文链接