首页
学习
活动
专区
圈层
工具
发布

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

改动的参数就是上方的蓝色代码(第2-4个),分别为获取的输入框id,请求方式,url ajax的get请求附带请求数据的方式 ajax.open("get","my?...uname='张三'&password='123'",true); ajax.send(null); ajax的post请求附带请求数据的方式 ajax.setRequestHeader("Content-Type...303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET,但文件未变化 305——请求的资源必须从服务器指定的地址得到 306——前一版本HTTP中使用的代码,现行版本中不再使用...307——申明请求的资源临时性删除 400——错误请求,如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405—...HTTP版本 JQuery下的Ajax jquery是js的一个轻量型框架,已经将js创建的操作进行了封装, 而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装。

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

    javascript跨域

    实现跨域的原理:采用Jsonp原理实现跨域 到这里大家有没有发现一个问题,好像一直都在讨论http get 请求方式的跨域问题,难道post 请求就不存在跨域问题吗?...因为ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,是不允许js代码进行跨域操作,进而会发警告,所以jquery ajax post 是行不通的,可能这时有人会说...,用jsonp数据类型啊,但是jsonp目前只支持get请求方式,对post请求不支持。...我们在平时开发过程又不得不用post方式,因为get方式对请求的数量有大小限制,那在这种情况下如何保证用户良好的页面体验,又能解决跨域问题呢?...个人小结 在项目开发过程如果能用get方式解决的就尽量使用它,毕竟get的性能也比post高,而且处理get跨域请求的方法也比较多,比如用jquery库的 getScript和getJson方法。

    2K40

    ajax极简教程

    三、ajax实现方式 这里我们不做原生ajax的介绍,因为JQuery对ajax进行了封装。可以用少量的代码实现原生ajax的功能,同时又帮助我们解决了浏览器的兼容问题,没有道理不选它。...HTTP协议版本 200:请求成功 201:提示知道新文件的URL 202:接受和处理、但处理未完成 203:返回信息不确定或不完整 204:请求收到,但返回信息为空 205:服务器完成了请求,用户代理必须复位当前已经浏览过的文件...206:服务器已经完成了部分用户的GET请求 300:请求的资源可在多处得到 301:删除请求数据 302:在其他地址发现了请求数据 303:建议客户访问其他URL或访问方式 304:客户端已经执行了...GET,但文件未变化 305:请求的资源必须从服务器指定的地址得到 306:前一版本HTTP中使用的代码,现行版本中不再使用 307:申明请求的资源临时性删除 400:错误请求,如语法错误 401:请求授权失败...402:保留有效ChargeTo头响应 403:请求不允许 404:没有发现文件、查询或URl 405:用户在Request-Line字段定义的方法不允许 406:根据用户发送的Accept拖,请求资源不可访问

    2.2K100

    JSONP原理及使用

    首先抛出浏览器同源策略这个概念,为了保证用户访问的安全,现代浏览器使用了同源策略,即不允许访问非同源的页面,详细的概念大家可以自行百度。...这里大家只要知道,在ajax中,不允许请求非同源的URL就可以了,比如www.a.com下的一个页面,其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。...JSONP原理 ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js...JSONP具体实现 1.首先看下ajax中如果进行跨域请求会如何。 前端代码在域www.practice.com下面,使用ajax发送了一个跨域的get请求 <!...提示了不同源的URL禁止访问 2.下面使用JSONP,将前端代码中的ajax请求去掉,添加了一个script标签,标签的src指向了另一个域www.practice-zhao.com下的remote.js

    99340

    JS 跨域问题常见的五种解决方式

    现在设置为跨域:将ajax请求部分的url域设为 demoff.sinaapp.com 即对换注释部分,就会产生跨域问题 ?...(我们知道 请求的数据都不受域的限制) jsonp的使用方法: 客户端指明使用jsonp的方式,服务器接受参数,并外包裹要返回的数据...jquery的ajax简单描述: 前端指明data:jsonp , 在标明自定义的参数名 jsonp:jsoncallback <ul...jsonp的方式很简便,它的缺点就是: 它只支持GET请求而不支持POST等其它类型的HTTP请求; 它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题...如果想在 http://www.example.com/a.html  页面中通过ajax直接请求下述的页面,可以用一个隐藏的iframe来做一个代理。

    2.2K00

    AJAX

    method:请求的类型;GET 或 POST url:文件在服务器上的位置 sync:true(异步)或 false(同步) send(string):string:仅用于 POST 请求     3...alert(ajax.resopnseText)     }else{     alert(ajax.statusText)      }   } 5:了解get和post请求的区别 GET方法:通常用来从指定的资源请求数据...请求只应当用于取回数据 POST方法: 通常用来向指定的资源提交要被处理的数据 POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 请求对数据长度没有要求 POST方法主要是向服务器提交数据...GET请求 300——请求的资源可在多处得到 301——删除请求数据 302——在其他地址发现了请求数据 303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET,但文件未变化 305...—保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖,请求资源不可访问

    93340

    跨域详解 【原创】

    trigkit4"}); 3.2 实现 JSONP由两部分组成:回调函数和数据 回调函数是当响应到来时页面中调用的函数,数据是传入回调函数中的JSON数据 js中直接用XMLHttpRequest请求不同域的数据是不允许的...3.4 JSONP优缺点 优点:不像XMLHttpRequest对象实现的Ajax请求受到同源策略的限制;兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持...缺点:只支持GET请求,不支持POST等其它类型的HTTP请求;只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。...JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。 2....通过修改document.domain来跨子域 浏览器同源策略限制之一是不能通过ajax的方法去请求不同源中的文档。第二个限制是浏览器中不同域的框架之间不能进行js的交互操作。

    1.6K50

    【博客同步】跨域详解

    3.4 JSONP优缺点 优点:不像XMLHttpRequest对象实现的Ajax请求受到同源策略的限制;兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持...缺点:只支持GET请求,不支持POST等其它类型的HTTP请求;只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。...JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比JSONP有更好的错误处理。...通过修改document.domain来跨子域 浏览器同源策略限制之一是不能通过ajax的方法去请求不同源中的文档。第二个限制是浏览器中不同域的框架之间不能进行js的交互操作。...但document.domain的设置是有限制的,只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

    39610

    跨域详解

    3.4 JSONP优缺点 优点:不像XMLHttpRequest对象实现的Ajax请求受到同源策略的限制;兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持...缺点:只支持GET请求,不支持POST等其它类型的HTTP请求;只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。...JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。 2....通过修改document.domain来跨子域 浏览器同源策略限制之一是不能通过ajax的方法去请求不同源中的文档。第二个限制是浏览器中不同域的框架之间不能进行js的交互操作。...但document.domain的设置是有限制的,只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

    1.5K70

    Ajax技术详解(上)

    Get与Post区别 使用区别 ?...图1.5 Form Data数据项查看 Get使用URL或Cookie传参,而Post将数据放在body中 Get方式提交的数据有长度限制,一般在4k~10k,而post的数据则可以非常大,大概在2G。...Post比Get安全(注意post只是相比get较为安全,更安全的还得看https,因为通过post方式提交的数据可以在控制台的Form Data中看到) 终极区别 根据HTTP规范,Get用于信息获取...换句话说,Get请求一般不应产生副作用,就是说,它仅仅是获取资源信息,就像数据库查询一样,不会修改、增加数据,不会影响资源的状态。 根据HTTP规范,Post表示可能修改服务器上的资源的请求。...参考文献 jQuery-ajax:https://api.jquery.com/jQuery.ajax/ Vue-resource:https://github.com/pagekit/vue-resource

    2.3K20

    Web前端学习笔记之前端跨域知识总结

    0x02 通过document.domain跨域  前面说过了,浏览器有一个同源策略,其限制之一是不能通过ajax的方法去请求不同源中的文档。...JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。...对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。...POST", "/damonare",true); xhr.send(); 以上damonare部分是相对路径,如果我们要使用CORS,相关Ajax代码可能如下所示: <...关于CORS更多了解可以看下阮一峰老师的这一篇文章:跨域资源共享 CORS 详解 CORS和JSONP对比 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。

    1.4K30

    【Ajax进阶】跨域和JSONP的学习

    是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案,缺点是只支持GET请求,不支持POST请求。...CORS:出现的较晚,它是W3C标准,属于跨域Ajax请求的根本解决方案,支持GET和POST请求,缺点是不兼容某些低版本的浏览器。...JSONP的缺点 由于JSONP是通过script标签的src属性,来实现跨域数据获取的,所以,JSONP支持get数据请求,不支持POST请求,只能默认发起get请求。...jQuqery中的JSONP jquery提供的$.ajax()函数,除了可以发起真正的Ajax数据请求之外,可以通过改变数据类型使其能够发起JSONP数据请求。...发起post请求,会自动携带一个callback=jQueryxxx的参数,jQueryxxx是随机生成的一个回调函数名称。

    1.5K30

    尽可能讲清楚ajax

    其实我们在进行任何操作的时候,前端都会向后端发送一个请求,后端接收到请求后会向前端送回响应。在这个过程中我们就需要ajax。 同步和异步 在讲ajax之前我们要了解一个很重要的概念。...配置请求 需要配置发送方式(可用get或post),url,是否异步 xhr.open('get', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898...4xx 客户端错误——处理发生错误,责任在客户端,如:客户端的请求一个不存在的资源,客户端未被授权,禁止访问等 5xx 服务器端错误——处理发生错误,责任在服务端,如:服务端抛出异常,路由出错,HTTP...405 Method Not Allowed 请求方式有误,比如应该用GET请求方式的资源,用了POST 500 Internal Server Error 服务器发生不可预期的错误。...效果展示 2.jQuery 第一步要在头部导入jquery库 ajax/libs/jquery/3.7.1/jquery.min.js

    41610

    详解JavaScript跨域问题

    GET", "/trigkit4",true); xhr.send(); 以上的trigkit4是相对路径,如果我们要使用CORS,相关Ajax代码可能如下所示:...JSONP的优缺点 JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest...JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。...1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。...通过修改document.domain来跨子域 浏览器都有一个同源策略,其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。

    1.3K100
    领券