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//设置同步异步的
         });
看完上述内容,你们掌握jQuery中的ajax使用方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网站名称:jQuery中的ajax使用示例
文章路径:http://ybzwz.com/article/gpccjc.html