`

ajax原生和jQuery的用法

    博客分类:
  • js
 
阅读更多

原生的ajax方法:

$('#send').click(function(){
    //请求的5个阶段,对应readyState的值
        //0: 未初始化,send方法未调用;
        //1: 正在发送请求,send方法已调用;
        //2: 请求发送完毕,send方法执行完毕;
        //3: 正在解析响应内容;
        //4: 响应内容解析完毕;

    var data = 'name=yang';
    var xhr = new XMLHttpRequest();        //创建一个ajax对象
    xhr.onreadystatechange = function(event){    //对ajax对象进行监听
        if(xhr.readyState == 4){    //4表示解析完毕
            if(xhr.status == 200){    //200为正常返回
                console.log(xhr)
            }
        }
    };
    xhr.open('POST','url',true);    //建立连接,参数一:发送方式,二:请求地址,三:是否异步,true为异步
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');    //可有可无
    xhr.send(data);        //发送
});

 

jQuery的ajax方法:

$.ajax({
    url:'/comm/test1.php',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
        name:'yang',age:25
    },
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式:json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('发送前')
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log('错误')
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
        console.log('结束')
    }
})

 

分享到:
评论

相关推荐

    Ajax和jQuery学习笔记

    这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!

    原生与JQuery的ajax的使用

    内容包括 原生js的ajax与jQuery中的ajax 还包含了跨域的解决方法已经JSONP的原理及封装

    原生JS封装的ajax方法,使用类似Jquery

    原生js封装的ajax,使用上类似jquery一样便捷,里边有示例,可以参考

    详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web ...(1)html前端代码get请求方式创建一个ajax实例xhr open()方法传入三个参数,第一个是请求方式(一般为get和post),第二个参数是请求地址,第

    原生和jQuery的ajax用法详解

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。这篇文章主要介绍了原生和jQuery的ajax用法,需要的朋友参考下吧

    原生js实现对Ajax的封装(仿jquery)

    众所周知,jquery在我们日常开发中的使用频率非常高,与js相比,我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服。...

    原生js仿jquery实现对Ajax的封装

    大家都知道jquery在我们日常开发中的使用频率非常高,但jquery说到底还是对js的封装,我们不能光会使用,只有知道了其中的远离才能更好的使用,所以这篇文章主要介绍的是原生js仿jquery实现对Ajax封装的方法。

    原生JS与jQuery对AJAX的实现

    AJAX不是新的编程语言,而是一种使用现有标准的新方法。AJAX是与服务器交换数据并更新部分网页的技术,在不重新加载整个页面的情况下。就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求...

    ajax跨域解决办法

    本资源主要介绍了AJAX跨域的解决办法,以及解决方案间的比较

    Jquery的Ajax技术使用方法

    jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中经常使用的有三种: 1)$.get(url, [data], [callback], ...

    javascript实现原生ajax的几种方法介绍

    项目中不需要加载jquery这种庞大的js插件要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法

    超实用的jQuery代码段

    《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的jQuery代码段进行了全方位的介绍和演示。全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形...

    实例讲解使用原生JavaScript处理AJAX请求的方法

    主要介绍了实例讲解使用原生JavaScript处理AJAX请求的方法,这样就算是利用原生API而脱离了jQuery中的Ajax方法,需要的朋友可以参考下

    认识jQuery的Promise的具体使用方法

    和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve、reject、then方法,还有done、fail、always……方法。jQuery就是用这个Deferred对象来注册异步操作的回调函数,修改并传递异步操作的状态。 玩玩...

    原生JavaScrpit中异步请求Ajax实现方法

    一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需要ajax功能而引入Jquery比较不划算。 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问...

    深入PHP与jQuery开发 pdf格式

    提示 我们将在第2章演示使用jQuery的AJAX工具和使用原生JavaScript进行AJAX开发有什么异同。 时至今日,已有很多的JavaScript库可用。最流行的JavaScript库有Prototype(http://www. prototypejs.org)、MooTools...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    ajax操作-原生ajax ajax操作-JQuery的ajax ajax操作-伪ajax(iframe) ajax操作-时机选择 文件上传(3种方式)-1 文件上传-时机选择及预览-2 图片验证码 KindEditor基本使用和文件操作 作业 第25周 今日内容概要 ...

    详解原生JavaScript实现jQuery中AJAX处理的方法

    在这篇文章,我使用 Node.js作为后端。没错,这就可以全栈(浏览器和服务器)JS了。Node.js 是很简洁的,我鼓励你能在 Github下载demo,并关注该项目。下面是服务器端的代码: // app.js var app = ...

Global site tag (gtag.js) - Google Analytics