原生与jQuery封装的ajax请求数据及状态码

原生Ajax 请求数据

btn.addEventListener(‘click‘,function(){
        if(window.XMLHttpRequest){
            var xhr = new window.XMLHttpRequest();
        }else{
            //兼容IE浏览器
            var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
        }
        //请求方式get/post
        //请求URL
        //ture 异步请求;false 同步请求
        xhr.open(‘get‘,‘/ajax/getdata‘,true);
        //给xhr 绑定事件监听状态的改变(状态码见下)
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);
            }
        }
        //发送请求数据 //get方法send参数为空或null
        xhr.send();
    });

jQuery 实现的Ajax 封装

//jQuery
    $(‘.btn‘).on(‘click‘,function(){
            $.ajax({
                url:‘/ajax/getdata‘,
                type:‘get‘,
                dataType:‘json‘,
                //成功执行函数
                success:function(response,status){
                   console.log(responseText);
                }
            });
        });

xhr.readystate 状态码

0:unsend  //当前请求还未发送

1:opened //URL地址已经打开

2:headers_received //响应头信息已经接收

3:loading // 主要的返回数据正在服务器进行准备处理

4:done //响应主体的内容已经成功返回客户端

xhr.status 服务器状态码

200及以2开头的:成功(响应的主体已经成功返回客户端)

301:永久重定向/转移

302:临时重定向/转移

304:本次获取的内容是读取的缓存

400:客户端->服务器的参数错误

401:无权限访问

404:访问地址不存在

500:未知的服务器错误

501:服务器超负荷

//数据不全仅供参考----------

时间: 2024-10-03 04:00:22

原生与jQuery封装的ajax请求数据及状态码的相关文章

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

mui封装的ajax请求

由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET.POST请求方式,支持返回json.xml.html.text.script数据类型: 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get().mui.getJSON

jQuery封装的ajax操作

jQuery中ajax请求有三种操作方式$.get() $.post() $.ajax() get和post(是对$.ajax的封装) //不传递数据 $.get("./16.php",function(msg){ alert(msg); }); //给服务器传递数据 $.get("./16.php",{name:'tom',age:23},function(msg){ alert(msg); }); //用法与get方法类似 $.post("./16.p

浅谈jquery中的ajax请求和跨域请求

ajax请求数据的代码: $(function () { $.ajax({ url:url,//请求文件所在的url type:"get",//请求的方式 success:function (data) { console.log(data);//返回的数据 } })})这样请求来的数据一般情况下都可以使用,但是有时候在从这个域名到另外一个域名请求数据时往往会出现所谓的跨域请求问题, 浏览器均默认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在协议.域名.端口均相同才能被访问

封装的ajax请求

在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的正确与否.这儿也将ajax请求进行了封装,当我们在项目中需要多次ajax请求时,就可以用封装的函数了,不用每次都写ajax请求,提高了代码的利用率和工作效率.当然封装得不一定很完美,网上也有很多优秀的封装好的ajax请求.也是通过闭包思想,具体的封装思路,在代码注释中也写得很详细了 这是封装的aja

使用jquery实现跨域请求数据

首先处理服务器代码,使返回的数据符合特定的格式,为了方便这里使用了php test.php代码如下 1 <?php 2 $con = mysql_connect("localhost","root","root"); 3 mysql_select_db("test", $con); 4 5 $result = mysql_query("select username,password from user&quo

jquery跨域Ajax请求

sonp原理: 首先在客户端注册一个callback, 然后把callback的名字传给服务器. 此时,服务器先生成 json 数据.然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端. 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定

js方法内Ajax请求数据判断,验证无效(OnClientClick=&quot;return Method();&quot;),还是直接执行后台代码

function CheckAdd() { var flag = true; $.ajax({ cache: false, async: false, url: "/ajaxpage/getajax.aspx?t=adjserviceclientlist&Cellphone=" + Cellphone + "&a=" + Math.random(), dataType: 'json', success: function (data) { if (d

session失效,使用ajax请求数据被拦截,此时正常的处理逻辑是跳到登录界面,而不是界面没有变化(java判断是否是ajax请求)

在登录过滤器中,判断请求是ajax请求还是超链接或者地址栏变化的请求 if (httpServletReq.getHeader("x-requested-with") != null && httpServletReq.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")) { JSONObject jsessiontimeout = new JSONOb