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

Ajax全接触-imooc

Ajax介绍  同步——客户端发起请求,服务端需要处理,响应,此时客户端完全等待,当服务器处理完毕,客户端重新载入页面,如果出现错误,再次发生请求,处理,等待......异步——填写表单时,页面当时就把数据发送到服务器(发送请求),服务器处理响应,把结果发给页面,过程中不不要重新加载页面,填写的错误会实时显示,不会有任何的等待 XMLHttpRequest对象——可以用于后台和服务器交换数据...,表示客户端提交的请求有错误,例如:404 NOT FOUND 5XX:服务器错误,表示服务器不能完成对请求的处理:如 500 XMLHttpRequest发送请求 open(method,url,async...//TODO: 获取POST表单数据并保存到数据库 //提示保存成功 echo "员工:" ....(IE6\7不支持) jQuery中的Ajax (document).ready(function(){      ("#search").click(function(){          .ajax

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

    【AJAX】AJAX技术详细解析以及实例

    XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。...fname=Bill&lname=Gates",true); xmlhttp.send(); 使用post方式提交: 如果需要像 HTML 表单那样 POST 数据,需要setRequestHeader...send方法已调用,但是当前的状态及http头未知 3: 请求处理中- 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误..., 4: 请求已完成,且响应已就绪-数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 status: 200: "OK" 404: 未找到页面...返回结果为500-错误的页面: 让servlet出一个异常就可以模仿出来了。 例如:int a=12/0; ?

    1.6K10

    原生JS与jQuery对AJAX的实现

    无法发送文件 readyState改变时触发onreadystatechange事件,4为完成 status是返回状态,200是成功,404是未找到页面 responseText是返回的数据...$.post("demo_test.php",{   num:1 }, function (data) {   alert(data); }); 使用serialize()方法可以将表单中有...四、AJAX的调试 在运行AJAX的页面按F12(Chrome下),进入“Network”选项卡,点击"XHR"过滤器,然后触发AJAX的事件。 ? 点击要进行调试的AJAX动作,进入详情页。 ?...Request URL:查看请求的地址,一般在这里查看向后台请求的URL是否正确,错误404的话一般这里会有问题 Request Method:请求的方式,查看是GET或者POST,GET请求的参数一致的话会有缓存...一般是200正常;404未找到页面,一般是URL错误,或者后台没有创建相应的action;500内部服务错误,多为后台错误。

    4K20

    这次,我们聊聊ajax的创建过程

    项目中,一直在使用的是jQuery中封装好了的$.ajax()的方法,这个方法大家一定非常熟悉了,具体使用的格式参数等这里不再赘述,今天要详细说的是ajax的创建过程。...ajax:一种客户端向服务器请求数据的方式,不需要去刷新整个页面; ajax的核心:XMLHttpRequest对象 下面是我简单封装的一个函数: ajax({ url:'',...;具体来说是这样的:默认情况下,服务器对POST请求和提交WEB表单的请求并不会一视同仁。...不过,我们可以使用XHR来模仿WEB表单提交。...4.ajax请求是不能跨域的! 上述是我参考了《javascript高级程序设计》以及网上多方资料总结出来的,如果有错误,欢迎大家指正~~~

    4.5K690

    ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤(详细代码)

    在前端工作中,经常会用到ajax,其实很多人只知道ajax是异步请求,不知道应该如何用它,它的基本步骤有哪些,ajax请求过程是怎样的?...1.建立xmlHttpRequest对象 所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均支持XMLHttpRequest 对象,而IE5 和 IE6 使用 的是...status属性:响应的 HTTP 状态码 200:响应成功 301:永久重定向/永久转移 302:临时重定向/临时转移 304:本次获取内容是读取缓存中的数据 400:请求参数错误 401:无权限访问...404:访问的资源不存在 总结:以上介绍了Ajax请求的五个步骤以及详细代码 ,没有接触过得朋友可能看起来比较困难,没关系,看了以后,多去动手敲敲,慢慢就懂了,希望可以帮助到你!...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145570.html原文链接:https://javaforall.cn

    2.1K40

    第一篇博客

    图片 在这样的配置条件下,我的ajax请求不再返回php原代码了,返回了另外的错误。 图片 而且文件夹下我新写了一个phpinfo页面,nginx提示404,尚未找到配置错误问题。...然后我改了ajax样式,用了jquery并且把ajax相关代码放到了body靠前的位置。这个时候php段只能接收数字,后来把php返回的数据加上json_encode(),返回的数据也正常了。...ajax中跨域访问没有那么容易实现,也就是我nginx只有root下的内容才能被ajax访问,其余位置都属于跨域,这导致一些其他文件都只能放在项目里。...php文件这样调试极其不方便,php语言里有什么错误我只能肉眼去看,错误并不能alert出来,我没找到好的解决办法。...然后很重要的一点就是,要加一个随机数在表单里,不然浏览器缓存了之后,部分功能体验可能不是很好。(虽然我加上了,还是会缓存) php读文件又出问题了。

    56630

    《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(16)-Charles其他骚操作之大结局

    2.模拟403/404 其实之前在过滤请求中,宏哥已经介绍过White List......,如下图所示: 2.设置允许启用黑名单功能,选择接口返回错误的形式(404 或者403),添加接口地址并保存,如下图所示: 注:【blocking action】 选项可以选择“Drop connection...”或者 “Return 403 response”.前者接口会直接返回404错误,后者接口返回403错误 3.选中需要返回404/403的接口,点击【Ok】,如下图所示: 4.再次请求效果如下(接口返回...Charles主要功能 支持SSL代理。可以截取分析SSL的请求。 支持流量控制。可以模拟慢速网络以及等待时间(latency)较长的请求。 支持AJAX调试。...支持AMF调试。可以将Flash Remoting 或 Flex Remoting信息格式化,方便查看。 支持重发网络请求,方便后端调试。 支持修改网络请求参数。 支持网络请求的截获并动态修改。

    1.8K30

    ajax发送异步请求四个步骤,AJAX的异步请求的四个步骤

    ajax异步请求详解ajax ajax定义:异步的JavaScript和xml浏览器 一、建立对象,XMLHttpRrquest的出现才有了异步处理。...服务器 XMLHttpRrquest是AJAX的基础异步 全部的现代浏览器均支持XMLHttpRrquest对象(IE5和IE6使用ActiveObject)async XMLHttpRrquest用于在后台与服务器交换数据...(异步 )或false(同步) Send(string) 将请求发送到服务器 3.浏览器与服务器创建链接 4.服务器响应 readyState 属性表示Ajax...响应发送完毕 经常使用状态码及其含义: 404 没找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal service error) 200...xhr.readyState==4){if(xhr.status==200||xhr.status==304){ var data=xhr.responseText; alert(data); } } } 发布者

    1.8K10

    JavaScript基础学习--02属性操作

    三、其他要点: 1、表单提交按钮input和button、a的差异和选择。      ...其次,如果不用表单直接提交的方式(action),而是选择异步或者其他方式提交,则选择a标签。...(2)submit按钮在IE6下会有一些兼容的问题,不好统一。            ...(3)在按钮有一些交互效果的时候,a标签更容易实现,hover效果便可(有些浏览器只支持a标签的hover的css效果(IE6不支持button等其他hover))      注意:a标签表单不会自动提交...但是例如延时执行、ajax异步加载看起来像是“多线程”,其实是“回调”,类似于操作系统中的“中断和响应”,比如ajax异步加载,代码执行到ajax部分时,代码中断并开始往下执行,当ajax请求数据返回时

    2.3K90

    【网络原理】关于HTTP状态码以及请求的构造的哪些事

    1.HTTP状态码 1.1引言 我们在平时上网的时候,有没有过这种出现404 not found的情况,当然是存在的,但是为什么没有搜索的网页的时候,就会出现这个呢???...这里表示就是服务器允许收到GET,但是这边你发送了一个POST 5.500 Internal Server Error 这里表示就是服务器内部出现了错误,就是“挂了” 6.503 Gateway Timeout...主要是影响到浏览器的缓存,下次访问,直接访问这个最终的目标地址即可; 并且在响应的请求头中,这里就会设计到一个location,其中就描述了最终跳转定位的网址 总结: 学习状态码的意义 更加好的认识问题所在,来进行调试...来实现数据的发送以及接收,总体来说还是比较简单的; 2.3其他方法构造 这里是通过代码来进行构造的http请求,当时日常生活中还需要使用HTML/JS来进行HTTP请求的构造,这里就有两种常见前端构造的方式: 1.form表单构造...”,下期小编将进行HTTPS的章节,立即SSL加密机制; ~~~~最后希望与诸君共勉,共同进步!!

    30710

    锋利的JQuery学习笔记之JQuery-Ajax的应用

    在最初学习Ajax的日子里,我被ASP.NET AJAX框架提供的UpdatePanel迷惑了,以后Ajax就这么简单,所以在最初做的几个项目里,前台代码里必至少有一个UpdatePanel区域,把要局部刷新的内容全放到这个...2.破坏浏览器“前进”、“后退”按钮的正常功能;3.对搜索引擎支持的不足;4.开发和调试工具的缺乏;   下面看一段最经典的实现Ajax的js脚本代码: IE6是以ActiveXObject的方式引入XMLHttpRequest的   xmlHttpReq = new ActiveXObject...("Microsoft.XMLHTTP");  }  else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象...即使在表单中增加多个字段,脚本仍然能够使用,并且不需要做其他多余的工作。

    90740

    Ajax 的简介与使用

    一、什么是Ajax Ajax 的全称是 Asynchronous JavaScript and XML(即异步的 JavaScript 和 XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术...2、缺点 不支持浏览器back按钮 安全问题,Ajax 暴露了与服务器交互的细节 对搜索引擎的支持比较弱 三、Ajax 的使用 -- 实现步骤 1、创建 XMLHttpRequest 对象,即创建一个异步调用对象...//IE7+, Firefox, Chrome, Opera, Safari... }else{   XHR=new ActiveXObject("Microsoft.XMLHTTP"); //IE6...readyState 等于 4 且状态为 200 时,表示响应已就绪) 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意) 403:(禁止) 服务器拒绝请求 404...:(未找到) 服务器找不到请求的网页 408:(请求超时) 服务器等候请求时发生超时 500:(服务器内部错误) 服务器遇到错误,无法完成请求

    1.3K10

    Ajax的基础使用

    有了ajax这种异步请求工具之后,后端程序员就不在需要使用到JSP了,前端的html页面可以通过ajax的异步请求与后端直接联系,这样前后端的分工就更加明确了。...我们通过一个例子来讲解ajax的使用吧。...这个案例的目的就是完成我们常见的像百度啊,那种点击搜索栏就会出现提示词那种异步请求,网页没有刷新,但是确实响应了,然后紧跟时代,这个案例我使用SpringBoot来做,最开始用的还是传统的MVC,但是说实话,太麻烦了,一大堆配置,调试都要半天...154654'); SET FOREIGN_KEY_CHECKS = 1; 项目结构 一定注意一点,就是这个后端的java类,一定要写在Springbootlogincheck包下面,不然会导致网址访问不到404...错误。

    50700

    JavaEE-- 网络编程 http请求报头

    点击Fiddler中的 即可进行解压缩,看到原始的内容. 404NotFound 没有找到资源....如果输⼊正确,则可以正确访问到.但是如果输⼊错误,比如 会看到404这样的响应 403Forbidden 表⽰访问被拒绝.有的⻚⾯通常需要⽤⼾具有⼀定的权限才能访问(登陆后才能访问).如果⽤⼾没有登陆...xxx', success: function(body) { // 回调地狱的始作俑者 console.log(body); } }); 优点:跨浏览器兼容极好,当时 IE6...构造HTTP请求 前端⻆度,除了浏览器地址栏能构造GET请求,form表单能构造GET和POST之外,还可以通过 ajax 的⽅式来构造HTTP请求.并且功能更强大 ajax 全称AsynchronousJavascriptAndXML...这个错误是因为ajax默认不能"跨域",也就是"百度下⾯的html中的ajax不能访问搜狗的内容".这 样的设定也是完全合理的.

    25610

    Ajax之路

    Ajax:使用ajax技术不用刷新整个页面,只需对局部页面进行刷新。也就是说用XHR对象取得新数据,然后通过DOM方式将新数据插入到页面中,达到局部更新的效果。   ...Ajax优点: 减少冗余请求,节省网络带宽,提高网页加载效率,从而缩短用户等待时间,促进页面与数据分离,提高用户体验   Ajax缺点: Ajax干掉了浏览器后退机制(back按钮); 特定页面很难加入收藏夹...//IE7+,Firefox,chrome,Opera,Safari等现代浏览器执行代码 4 xhr=new XMLHttpRequest(); 5 }else{ 6 //IE6...name=a&age=b",true); xhr.send(); 如果要像html表单那样POST数据,需使用setRequestHeader(Header,value)来添加HTTP头进行模拟。...XMLHttpRequest的状态(0,1,2,3,4):   0:请求未初始化; 1:服务器连接已建立; 2:请求已接收; 3:请求处理中; 4:请求已完成,响应已就绪 status: 常见200(“OK”),404

    1.5K80

    前端-Ajax的全面总结

    XMLHttpRequest();//在这里创建 XMLHttpRequest对象  } else if (window.ActiveXObject)  {// code for IE5 and IE6...(3).关于status 由服务器返回的 HTTP 状态代码,200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。...(状态码404、403、301、302...都会进入complete,只要不出错就会调用) 六.XML -> JSON Ajax中的是 "x" 指的就是XML。...使用GET请求重定向 **404:客户端请求失败** 408:请求超时 **500:内部服务器错误,无法完成请求** 505:服务器不支持请求的HTTP协议的版本,无法完成处理 十.不可忽视的HTTP头文件...http请求中的一个重要关注点就是请求头和响应头的内容,从这两个头文件中可以看出很多东西,当我们用发送一个ajax请求的时候,如果没有达到预期的效果,那么就需要打开浏览器的调试工具,从NetWork中找到相应的

    3.1K30
    领券