首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生JS与jQuery对AJAX的实现

就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况,...像在创建账号的时候检测此用户名是否存在就是一个典型的案例,本文讲从原生JS和jQuery方面介绍AJAX的实现,跨域问题暂且不表。...POST发送的数据量大 AJAX无法发送文件 readyState改变时触发onreadystatechange事件,4为完成 status是返回状态,200是成功,404是未找到页面...responseText是返回的数据,为字符串格式 三、jQuery实现AJAX 1.GET 使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,...一般是200正常;404未找到页面,一般是URL错误,或者后台没有创建相应的action;500内部服务错误,多为后台错误。

3K20

.ajax get 写法,原生Ajax写法(GET)

事件 当readyState的值发生改变时触发此事件 open() 这个方法有三个参数,open(“提交方式 get/post”,”资源的地址”,异步或者同步 true/false); readyState...3(数据传送中)已接收部分数据,因为相应及http头不全,这时通过responseText获取部分数据会出现错误 4(完成)数据接收完成,此时可以通过responseText获取完整的数据 status...请求状态 200(成功) 404(没有发现文件) 500(服务器内部错误) responseText 请求成功后获取数据 原生ajax写法 ajax1.0,ie9及以下,ie10+支持ajax2.0...对象,对于低版本的IE,需要换一个ActiveXObject对象 var xhr; if (window.XMLHttpR … 原生ajax与封装的ajax使用方法 当我们不会写后端接口来测试ajax时...通过在后台 … ASP.NET学习笔记(5)——原生Ajax基本操作 说明(2017-11-4 15:32:49): 1.

3.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    全面分析前端的网络请求方式

    的替代者 axios、request等众多开源库 三、关于网络请求的疑问 Ajax的出现解决了什么问题 原生 Ajax如何使用 jQuery的网络请求方式 fetch的用法以及坑点 如何正确的使用 fetch...四、Ajax的出现解决了什么问题 在 Ajax出现之前, web程序是这样工作的: ?...|4 | DONE | 下载操作已完成。 status 表示 http请求的状态, 初始值为 0。如果服务器没有显式地指定状态码, 那么 status将被设置为默认值, 即 200。...注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)"json": 返回 JSON 数据 。"...Headers 可以通过 Headers()构造函数来创建一个你自己的 headers对象,相当于 response/request 的头信息,可以使你查询到这些头信息,或者针对不同的结果做不同的操作。

    1.8K40

    jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

    发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。...数据类型 $.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。...如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。 注意:JSONP 是 JSON 格式的扩展。...如果服务器需要 HTTP 认证,可以使用用户名和密码可以通过 username 和 password 选项来设置。 Ajax 请求是限时的,所以错误警告被捕获并处理后,可以用来提升用户体验。...Ajax 的第一个字母是 asynchronous 的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。

    14.5K30

    AJAX-前后端交互的艺术

    当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的 传统方式:用户触发一个HTTP请求到 Web服务器,服务器接收并处理传来的数据...AJAX 所代表的的是 JavaScript和XML。AJAX是一种新技术,它通过利用 XML,HTML,CSS 和 JavaScript 来创建更好,更快,更具有交互性的Web应用程序。...解释 200 请求成功 302 请求重定向 304 请求资源没有改变 404 请求资源补不存在,属性客户端错误 500 服务器内部错误 编写一个简单的 AJAX 程序(原生方式)我们简单的模拟一个表单校验的程序...,在这里只选择了一些相对简单或者说必须的,详情可以参考 JQuery API 文档 举个例子: 在 Servlet 和 html 均不变的基础上,我们修改 js代码,使用jquery的方式来实现同样的功能...,并且我们对 AJAX 有了一定的认识,但是 AJAX 的一些应用场景,以及AJAX 如何搭配 常见的 如 JSON 等数据格式,实现前后端的交互,并没有提到,我们就放到后面说,将全部的内容挤到一起,无论是从篇幅或者说内容的针对性都是不够强的

    1.9K10

    一个小时学会jQuery

    我们使用术语jQuery包装器或者包装集(wrapped set),来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。...语法:$(".className") 本例通过类名来获取元素,因为使用同一个类样式的元素可能有多个,所以通过类名来获取元素返回的将是一个数组对象,即jQuery中的包装集,然后对此包装集中的元素进行相关操作...如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。 注意,JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。...如果服务器需要HTTP认证,可以使用用户名和密码可以通过username和password选项来设置。 Ajax请求是限时的,所以错误警告被捕获并处理后,可以用来提升用户体验。...Ajax的第一个字母是asynchronous的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。

    18.5K71

    无内鬼 整点AJAX

    出现的很早 1998 年出来,首次是微软提出来的,并没有引起重视;直到2005年左右,谷歌推出 gmail,gmap 使得ajax技术一时间流行起来。...1:载入,AJAX 对象开始发送请求 2:载入完成,AJAX 对象的请求发送完成 3:解析,AJAX 对象开始读取服务器的响应 4:完成,AJAX 对象读取服务器响应结束...status 表示响应的 HTTP 状态码,常见状态码如下: 200:成功 302:重定向 404:找不到资源 500:服务端错误 responseText 获得字符串形式的响应数据...在代码中我们可以通过定时器和请求中断来实现超时处理的效果。...如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME类型就被识别为 XML,可以不填,可用值:"xml"、"html"、"script"、"json"、"

    5.2K50

    前端-Ajax的全面总结

    complete:请求完成后回调函数 (请求成功或失败时均调用)。 注意到括号里面了吗,没错,区别就在于complete只要请求完成,不论是成功还是失败均会调用。...(状态码404、403、301、302...都会进入complete,只要不出错就会调用) 六.XML -> JSON Ajax中的是 "x" 指的就是XML。...使用GET请求重定向 **404:客户端请求失败** 408:请求超时 **500:内部服务器错误,无法完成请求** 505:服务器不支持请求的HTTP协议的版本,无法完成处理 十.不可忽视的HTTP头文件...http请求中的一个重要关注点就是请求头和响应头的内容,从这两个头文件中可以看出很多东西,当我们用发送一个ajax请求的时候,如果没有达到预期的效果,那么就需要打开浏览器的调试工具,从NetWork中找到相应的...ajax请求,再通过查看请求头和响应头的信息,大体会知道这次请求的结果是怎么样的,结合响应的主体内容,可以很快找到问题。

    2.2K30

    jquery中ajax参数详解

    注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。...发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。...数据类型 $.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。...如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。 注意:JSONP 是 JSON 格式的扩展。...Ajax 的第一个字母是 asynchronous 的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。

    2.1K30

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    你甚至可以通过制定ID来实现载入部分内容的Ajax操作,如: $('#ajax-div').load('data.html#my-section'); 实现GET和POST方法 get( url,...使用JSON相比传统的通过 GET、POST直接发送”裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的 ajax()函数的一个简化版本。...jQuery提供一个更为具体的函数:ajax()。 ajax( options ) ajax()提供了一大票参数,所以可以实现相当复杂的功能。...即服务器没有返回错误,返回的数据也没有错误 ajaxSuccess 全局事件全局的请求成功 error (局部事件) 仅当发生错误时触发。...ajaxComplete 全局事件全局的请求完成时触发 ajaxStop (全局事件) 当没有Ajax正在进行中的时候,触发 局部事件在之前的函数中都有介绍,我们主要来看看全局事件。

    3.8K100

    $.ajax()方法详解学习

    在工作总是会有很多地方用到异步请求,有时候用快捷方法 get/post 或者getJson不能满足自己的需求,所以必须使用底层的ajax来实现异步请求,每次写完下次在用到的时候就记不清楚了,就在这里记录一下...超时周期开始于.ajax 访问成功的那个时间点;如果几个其他请求都在进步并且浏览器有没有可用的连接,它有可能在被发送前就超时了。...如果需要发送同步请求,请将此选项设置为 false 。跨域请求和 dataType: “jsonp” 请求不支持同步操作。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。...当一个HTTP错误发生时,errorThrown 接收HTTP状态的文本部分,比如: “Not Found”(没有找到) 或者 “Internal Server Error.”...**data** 类型:PlainObject or String 一个普通对象或字符串,通过请求发送给服务器。

    5.4K10

    jQuery ajax() 方法

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件,其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。...函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求。 .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。....ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxSend() 在 Ajax 请求发送之前显示一条消息。...jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。 .ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。....ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。

    2.5K60

    Ajax,jQuery ajax,axios和fetch介绍、区别以及优缺点

    简单的来叙述一下这个过程,往下看: 1-1 请求类型 通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式。...02 Jquery Ajax 传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话...Jquery Ajax的出现是对原生XHR的封装,除此以外还增添了对JSONP的支持,Jquery Ajax经过多年的更新维护,真的已经是非常的方便了,但是随着react, vue, angular新一代框架的兴起...axios创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。...请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记: ★ 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该

    2.4K62

    前端数据获取之Ajax与Fetch (一)

    Ajax,读作”阿贾克斯“,这个是每一个web开发者必掌握的一门技术,现在咱们打开一个网页,页面上数据多多少少都会有它的一些参与,来获取数据,但也并不是所有的数据都是通过它来取到的。 ?...很多人熟悉JSON格式,你可以做用它和XML类比。XML也有自己的规范,和HTML很像,两个标签中间携带数据。为什么要用它来数据传输呢?...AJAX实现原理 本质是浏览器底层与操作系统暴露出来的一个API,在浏览器中有一个XMLHttpRequest的构造函数,当我们用一些包如jQuery的ajax或者Axiso请求数据时,用的其实就是它的实例...当实例化成功时,readyState为0,实例执行open方法,readyState为1,这两个均为同步操作内容,请求尚未发送。 当实例的send方法执行后,请求发送。...AJAX的内容,本期先介绍这么多,下一期介绍一下ES6后新的数据请求方式Fetch。 如上内容均为自己总结,难免会有错误或者认识偏差,如有问题,希望大家留言指正,以免误人。

    1.8K20

    前端开发中不可忽视的知识点汇总(二)

    而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。...) getElementById() //通过元素Id,唯一性 40. jquery中如何将数组转化为json字符串,然后再转化回来?...jQuery中没有提供这个功能,所以你需要先编写两个jQuery的扩展: $.fn.stringifyArray = function(array) { return JSON.stringify...的扩展,就是为jquery类添加成员函数 使用:jquery.extend扩展,需要通过jquery类来调用,而jquery.fn.extend扩展,所有jquery实例都可以直接调用。...HTTP 403.17 - 禁止访问:客户证书已经到期或者尚未生效 404——一个404错误表明可连接服务器,但服务器无法取得所请求的网页,请求资源不存在。

    1.7K40

    Ajax详解(拓展:利用Ajax实现用户名的校验)

    ,继续处理 2**:操作成功收到,分析、接受 3**:完成此请求必须进一步处理 4**:请求包含一个错误语法或不能完成 5**:服务器执行一个完全有效请求失败 100——客户必须继续发出请求 101——...307——申明请求的资源临时性删除 400——错误请求,如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405—...—用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖,请求资源不可访问 407——类似401,用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求...HTTP版本 JQuery下的Ajax jquery是js的一个轻量型框架,已经将js创建的操作进行了封装, 而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装。...如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

    1.3K10

    Ajax设置请求和接收响应、自己封装简易jQuery.Ajax、回调函数

    Ajax设置请求和接收响应、自己封装简易jQuery.Ajax 这篇文章是承接前几篇博客的,是前几篇继续学习 包括Ajax学习与理解和简化版自己实现jQuery等 这篇文章只算是我的个人学习笔记,内容没有精心排版...,一些错误请见谅....失败时:(假如请求一个不存在的路径,响应状态码是404,但是也有响应体responseText) 例如,访问一个不存在的路径/frank: myButton.addEventListener("click...:这个函数必须按照规定的顺序传参,第二,如果没有参数就会出现类似于$.ajax("post",null,successFn,null)的情况,必须传有结构的参数(对象) 3.2什么是回调 在上面的代码中...5函数传不同的参数 例如文档里的 jQuery.ajax( url [, settings ] ) jQuery.ajax( [settings ] ) jQuery.ajax第一个参数既可以是url

    2.6K50

    Django---Ajax

    整个过程中页面没有刷新,只是刷新页面中的局部位置而已! 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!...整个过程中页面没有刷新,只是局部刷新了; 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作; AJAX的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求; AJAX...1 2 3 4 5 $.ajax({   headers:{"X-CSRFToken":$.cookie('csrftoken')},   }) ajax发送json类型的数据时,跨域伪造要采用此方法...但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截。 Jsonp jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。...(dic)) 这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。

    4.8K101
    领券