jQuery中的ajax使用示例

这篇文章主要为大家详细介绍了jQuery中的ajax使用方法，文中示例代码介绍的非常详细，零基础也能参考此文章，感兴趣的小伙伴们可以参考一下。

ajax  --前后台分离开发    api(程序应用集---数据接口)
局部刷新技术
异步请求（请求和后续代码同时执行）  同步请求（等待请求执行完成在执行后续代码）
专门做后台数据的访问的
先学习原生js的ajax  对象  XMLhttprequest 对象  后台数据访问的对象
原生js在访问后台数据的时候专门写
1.实例化对象
2.open  连接远程服务器  参数： method  请求的方式  get  post   url:请求的服务器路径
async  当前的请求是同步还是异步  true  异步  false  同步   user  用户名  password  密码

1. send() 发送请求
   4.响应事件onreadystatechange
   5.渲染界面

   var http = new XMLHttpRequest();
    //2.建立服务器连接
    http.open("get", "./data/student.txt");
    //3.发送请求
    http.send();
    //4.服务器响应
    http.onreadystatechange = function () {
    //5.界面的渲染
    //判断   获取最终读取完成状态
    if (http.readyState == 4) {
    //返回的数据都是string
    //console.log(typeof http.responseText);
    console.log(http.response);
    //字符串类型的json数据转化为对象型json  JSON.parse()
    var data = JSON.parse(http.response);
    console.log(data);
    //对象json转化为string json  JSON.stringify
    //var strdata=JSON.stringify(data);
    //console.log(strdata);
    }
   
    }

   //原生ajax的封装
   function method(meth, url, data, async, callback) {
       //对象的创建
       var http = new XMLHttpRequest();
       //判断
       if (meth == "get") {
           //get 传递的数据在路径的后边  www.baidu.com?name=1&s=2
           if (data) {
               url += "?";
               url += data;
           }
           http.open(meth, url, async);
           http.send();
       }
       else {
           http.open(meth, url, async);
           //判断是否有数据
           if (data) {
               http.send(data);
           }
           else {
               http.send();
           }
       }
       //响应
       http.onreadystatechange = function () {
           //状态的判断
           //状态码  200 success  500  服务器报错 404  服务器端页面丢失
           if (http.readyState == 4 && http.status == 200) {
               //将请求的数据返回
               callback(http.response);
           }
   
       }
   }

   //域名解析就是localhost   没有写端口号默认80端口
   //协议不一致会产生跨域
   //端口不一致也会导致跨域
   //域名不一致也会产生跨域
   /*
    * http://www.maodou.com/mao/list.html
    * https://www.maodou.com/mao/list.html
    * http://www.maodou.com:8080/mao/list.html
    * http://www.dou.com/mao/list.html
    * */

   //跨域怎样解决
   //cros  资源共享   在后端进行配置   配置完成之后  可以直接访问
   //例如php  在后端文件里面写入一句话   header("Access-Control-Allow-Origin:");    代表所有
   //jsonp  跨域   在原生js里面叫src跨域  直接使用路径
   //src可以连接远程路径
   //直接使用script  src属性直接连接后台的api进行远程访问
   //在路径的后边带一个回调函数  就好了  后台的处理传回的回调函数
   //下面演示jsonp  跨域的问题

   //jsonp跨域原理是  在前端上使用src进行跨域   在接口上传入要执行的回调函数  （后台一定要处理回调函数  这样  前台的函数才有响应）
   2.jquery里面的ajax请求

   $.ajax({
        method:"get",//请求的方式  type
        url:"", //路径
        data:{},//传递的参数
        dataType:"",//数据类型
        jsonpCallback:"",//jsonp  跨域的
        success:function (res){
        //成功
        },
        error:function (){
        //请求失败
        },
        async:true//设置同步异步的
        });