`

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的区别示例分析

    原生Ajax和jQuery Ajax都是前端开发中用于与服务器进行异步数据交换的技术,但它们在实现方式和使用便利性上存在明显差异。以下是对这两者区别的详细分析: ### 原生Ajax基础 原生Ajax是通过使用浏览器提供的...

    原生与JQuery的ajax的使用

    这些jQuery方法的参数与原生JavaScript的`open()`和`send()`类似,但更易用,例如`$.get()`和`$.post()`接受URL,数据对象,回调函数和数据类型作为参数。 **AJAX跨域问题** 由于浏览器的安全策略,AJAX默认不允许...

    原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式

    在IT行业中,尤其是在Web开发领域,原生AJAX(Asynchronous JavaScript and XML)和jQuery库是经常被用来创建动态交互式用户体验的技术。本篇博客主要探讨如何利用这两者实现二级联动选择,即当用户在一级选择中作出...

    JQuery DoM和ajax 操作

    jQuery的AJAX功能是其另一个核心特性,它封装了原生的XMLHttpRequest对象,使得异步数据交互更加便捷。 1. **$.ajax()**: 这是jQuery中最全面的AJAX函数,允许我们自定义请求的所有参数,如URL、类型(GET或POST)...

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

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

    资料大全 09AJAX与JQuery.rar

    6. **AJAX封装**:$.ajax()是JQuery提供的一个高级AJAX函数,它简化了原生XMLHttpRequest的使用。 7. **插件系统**:JQuery社区开发了大量的插件,扩展了其功能,如jQuery UI,Bootstrap等。 **学习资源** - W3...

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

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

    jquery和json结合实现ajax

    以上就是使用jQuery和JSON结合实现AJAX的简单步骤。在实际开发中,还需要关注数据安全、性能优化等问题。例如,可以使用缓存策略减少不必要的请求,或者使用异步加载技术提高页面响应速度。通过这样的实践,你可以更...

    使用jQuery简化Ajax 开发.pdf

    为了直观地展示jQuery如何简化代码,我们可以比较一下使用原生JavaScript和DOM操作与使用jQuery实现相同功能的例子。假设我们需要为页面上某个区域内的所有链接添加点击事件,询问用户是否确认访问链接。使用传统的...

    Jquery+ajax+json+servlet

    jQuery提供了方便的$.ajax()方法,使得使用Ajax更加简单,同时支持JSON、XML等多种数据格式。 接着是`JSON`(JavaScript Object Notation),这是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析...

    jquery ajax demo

    综上所述,"jquery ajax demo"涵盖了jQuery AJAX的基本用法和高级特性,以及如何与jQuery UI结合使用,提供了一套完整的实践教程。通过这些知识,开发者能够高效地实现异步数据通信,提升Web应用的用户体验。

    原生和jQuery的ajax用法详解

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

    Jquery 的Ajax 用法

    JQuery 的 AJAX 用法是前端开发中常用的技术,它简化了原生 JavaScript 中的 AJAX 操作。AJAX,即异步JavaScript和XML,是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。JQuery 提供了一系列方便的API,...

    ajax和jquery

    总的来说,Ajax和jQuery的结合使用能够实现更加动态和交互性的Web应用,如GridView的高效操作。通过理解这两者的基本原理和API,开发者可以构建出更富表现力和响应式的网页。在实际项目中,掌握Ajax和jQuery的使用将...

    通过原生js和jQuery书写了一个电商平台系统.zip

    在原生JS和jQuery中,可以使用fetch API或jQuery的$.ajax()来实现。 8. **响应式设计**:为了适应不同设备的屏幕尺寸,电商平台需要具备响应式布局。这可能涉及到媒体查询(media queries)、Flexbox或Grid布局技术...

    Servlet_jsp_ajax_jquery(含答案).doc

    }` 这段代码首先通过ID获取jQuery对象,然后使用`.get(0)`将其转换为原生DOM对象,再访问`innerHTML`属性。 3. jQuery的选择器用于选取HTML元素。正确使文本“hello”字体大小变成40px的jQuery代码是B:`$('p.s1')...

    原生ajax使用

    6. **其他方法和属性** - `abort()`:用于取消当前请求。 - `getAllResponseHeaders()`:获取所有响应头。 - `getResponseHeader('headerName')`:获取指定响应头的值。 - `setRequestHeader('headerName', '...

    Three.JS+原生JS+jQuery实现3D机房

    在本项目中,我们主要探讨如何使用Three.js、原生JavaScript和jQuery来创建一个3D机房模拟系统。这个系统不仅展示了一个逼真的3D环境,还具备实用的功能,如设备管理、告警处理和机柜布局调整。下面将详细阐述这些...

    从Ajax到JQuery Ajax学习

    虽然原生JavaScript提供了强大的功能来实现Ajax通信,但在实际开发中,开发者往往更倾向于使用像jQuery这样的库来简化Ajax请求的操作。jQuery提供了一系列简洁的API来处理Ajax请求,极大地降低了复杂性并提高了开发...

    jquery ajax和webservice

    在标题和描述中提到的“jQuery AJAX和Web服务”是指使用jQuery来实现前端与后端Web服务(如ASMX)之间的异步通信,以提高网页的用户体验。 **AJAX(Asynchronous JavaScript and XML)** AJAX并非一个单一的技术,...

Global site tag (gtag.js) - Google Analytics