(1).操作系统访问网络上的DNS服务器，把域名转换为IP地址 (2).浏览器发起HTTP请求消息 (3).Web服务器接收并解析请求消息，查找指定的资源，可能访问数据库，构建并返回HTTP响应消息 (...①.100-199 提示消息 ②.200-299 响应成功 200 ③.300-399 重定向 304 ④.400-499 客户端请求错误 404 ⑤.500-599 服务器错误 500...e.5xx:服务器端运行错误 500(Internal Server Error 服务器代码里面运行有误,如java里面10/0) 501(Not Implemented 服务器无法处理正常的请求)...服务器端可以请求客户端不要缓存文档,或者将最大使用期设置为零，从而在每次访问的时候都进行刷新 Cache-Control:max-age=0; 客户端在事先没有跟原始服务进行再验证的情况下，不能提供对应数据的陈旧副本，但缓存仍然可以提供新鲜的副本... E.kk = '1.php' 18.Ajax常用对象和属性事件方法 (1).xhr对象：向web服务器发送请求，并接收返回响应消息 var xhr = new XMLHttpRequest
responseXML 属性 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性： 请求 books.xml 文件，并解析响应： xmlDoc...} else { alert("服务器响应出错信息,错误代码:" + xhr.status); } }...}else{ alert("服务器响应出错信息,错误代码:"+xhr.status); }...//succ是status返回为200后运行的函数。 //failure是status返回不为200后运行的函数。...演示结果: 返回结果为200-正确的页面: ? 返回结果为500-错误的页面: 让servlet出一个异常就可以模仿出来了。 例如:int a=12/0; ?
，解析响应数据并传递 } else { reject(new Error(response.statusText)); // 处理请求失败的情况，传递错误信息...函数，它接受URL和选项参数，并返回一个Promise对象。...如果请求成功（状态码为200-299），我们调用response.json()方法解析响应数据，并通过resolve函数将Promise状态转变为已完成状态，并传递解析后的数据。...，输出响应数据 }) .catch(error => { console.error('Error:', error); // 处理请求失败的情况，输出错误信息 });在上述示例中，我们调用...通过.then()方法，我们添加了处理已完成状态的回调函数，其中我们打印出响应数据。通过.catch()方法，我们添加了处理已失败状态的回调函数，其中我们打印出错误信息。
null 第五步：在监听函数中，判断readyState=4&&status=200表示请求成功 第六步：使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示..."utf-8"> ② 由于src在加载数据成功后，后直接将加载内容放入到script标签中 所以，后台直接返回JSON字符串将不能在script标签中解析 因此，后台应该返回给前台一个回到函数名...，并将JSON字符串作为参数传入 后台PHP文件中返回： echo "callBack({$str})"; ③ 前台接收到返回的回到函数，将直接在script标签中调用。...; ③ 后台返回以后，ajax依然可以用success作为成功的回调函数： success:function(data){} 当然后台也可以随便返回一个回调函数名。...JSONP的缺点： JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。
创建AJAX对象 发出HTTP请求 接收服务器传回的数据 更新网页数据 概括起来，就是一句话，AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。...1：表示已调用open方法，但还未调用send方法（请求还未被发送出去），仍然可以使用setRequestHeader()，设定HTTP请求的头信息。...）； 基本上，只有200和304的状态码，表示服务器返回是正常状态。...如果本次请求没有成功，或者数据不完整，或者不能被解析为XML或HTML，该属性等于null。...后端接口完成前如何 mock 数据： 根据接口文档，使用假数据来验证制作的网页响应和接口是否正常。 可以使用server-mock。 3，可以搭建php本地服务器用，php写脚本提供临时数据。
如何分析ajax跨域 上述已经介绍了跨域的原理以及如何解决，但实际过程中，发现仍然有很多人对照着类似的文档无法解决跨域问题，主要体现在，前端人员不知道什么时候是跨域问题造成的，什么时候不是，因此这里稍微介绍下如何分析一个请求是否跨域...> -> ，然后找到刚才的ajax请求，点进去 示例一(正常的ajax请求) 上述请求是一个正确的请求，为了方便，我把每一个头域的意思都表明了，我们可以清晰的看到，接口返回的响应头域中，包括了 所以浏览器接收到响应时...，判断的是正确的请求，自然不会报错，成功的拿到了响应数据。...示例二(跨域错误的ajax请求) 为了方便，我们仍然拿上面的错误表现示例举例。...示例三(与跨域无关的ajax请求) 当然，也并不是所有的ajax请求错误都与跨域有关，所以请不要混淆，比如以下: 比如这个请求，它的跨域配置没有一点问题，它出错仅仅是因为request的 和response
2.如果服务器长时间未能返回Response，则客户端将会无响应，用户体验很差。 3.服务端返回Response后，浏览器需要加载整个页面，对浏览器的负担也是很大的。...2.定义成全局变量后，可能出现两个请求或多个请求共享同一个请求对象。而这个请求对象只能存放一个回调函数来处理服务器响应。当服务器返回两个请求的Response后，可能会调用后指定的回调函数。...responseXML 服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。...后，执行paintWeeklyCandler(data)方法 后台PHP代码 <?...；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等 4.可能破坏浏览器后退按钮的正常行为； 5.一些手持设备（如手机、PAD等）自带的浏览器现在还不能很好的支持Ajax
在工作总是会有很多地方用到异步请求，有时候用快捷方法 get/post 或者getJson不能满足自己的需求，所以必须使用底层的ajax来实现异步请求，每次写完下次在用到的时候就记不清楚了，就在这里记录一下...超时周期开始于.ajax 访问成功的那个时间点；如果几个其他请求都在进步并且浏览器有没有可用的连接，它有可能在被发送前就超时了。...注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加”_={timestamp}”（详见ajax防止缓存）。...) 请求成功后的回调函数。...**success** 类型:Function( PlainObject data, String textStatus, jqXHR jqXHR ) 当请求成功后执行的回调函数。
=== 200) { // 响应成功 // 返回来的格式可能不一样 var result = null; if (dataType ===...方法 jQuery为我们提供了更强大的Ajax封装 $.ajax 参数列表 参数名称 描述 取值 示例 url 接口地址 url:"02.php" type 请求方式 get/post type:"get...,并且不能重复提交请求 需求3：根据不同响应结果，处理响应 3.1 接口调用成功 100 提示用户注册成功，3s后跳转到首页 101 提示用户"用户名jepson已经存在..." } 参数说明: code 当前业务逻辑的处理成功失败的标识 100:成功 101:用户存在 102:验证码错误 msg 当前系统返回给前端提示 name:...-- 指定了type为text/html后，这一段script标签并不会解析，也不会显示。
使用AJAX的时候，当你点击 “提交”，JavaScript 会发送一个请求到服务器，解析请求响应，并且更新到页面中，纯粹来说，用户是无法感觉到任何数据被传送到了服务器。...，具有良好的响应能力 将一些工作从服务器转移到客户端中，节省了服务器和带宽资源 按需取数据 ，减轻了服务器负担，也大大减少了冗余请求 缺点： AJAX 主要依赖于JavaScript ，浏览器对 JavaScript...readyState=4 求已完成：请求完成后，并且已从服务器完全接收到响应数据 状态码 解释 200 请求成功 302 请求重定向 304 请求资源没有改变 404 请求资源补不存在，属性客户端错误...}); } url：请求路径 type：请求方式 date：请求参数，想对应于原生JS实现的，data: "username=admin&age=20" success：响应成功后的回调函数...value 参数 callback：载入成功时回调函数 type：返回内容格式，xml, html, script, json, text, _default 这种方式旨在快速的实现请求，当请求成功的时候可以调用回调函数
/ajax.php）",true) //注意点：url中不能出现中文，只能数字、字母、ASCII码、下划线 // GET方式的 url格式：./ajax.php?t=123&321.........("GET","ajax.php?"...responseText 可以获取服务器以字符串形式返回的数据 responseXML 可以获取服务器以XML形式返回的数据 //调用方式 // ajax对象.要获取的方式 xmlHttp.responseText.../json.txt)"); 跨域 ajax的请求过程：ajax发送请求–浏览器–服务器 响应过程则是请求过程的颠倒 当ajax发送请求到浏览器，浏览器发送到服务器，处理并响应后，原路返回到浏览器，此时会验证其请求来源的域名跟发送请求时是否一样...，是则过，否则会被浏览器截止并提示错误，这正是跨域所造成的，想要解决此问题，并不能从前端入手，应该从后端，只有在后端响应并返回后告诉浏览器是自己人即可。
如何分析ajax跨域 上述已经介绍了跨域的原理以及如何解决，但实际过程中，发现仍然有很多人对照着类似的文档无法解决跨域问题，主要体现在，前端人员不知道什么时候是跨域问题造成的，什么时候不是，因此这里稍微介绍下如何分析一个请求是否跨域...打开Dev Tools 发送ajax请求 右侧面板->NetWork->XHR，然后找到刚才的ajax请求，点进去 示例一(正常的ajax请求) 上述请求是一个正确的请求，为了方便，我把每一个头域的意思都表明了...: Get,Post,Put,OPTIONS Access-Control-Allow-Origin: * 所以浏览器接收到响应时，判断的是正确的请求，自然不会报错，成功的拿到了响应数据。...示例二(跨域错误的ajax请求) 为了方便，我们仍然拿上面的错误表现示例举例。...示例三(与跨域无关的ajax请求) 当然，也并不是所有的ajax请求错误都与跨域有关，所以请不要混淆，比如以下: 比如这个请求，它的跨域配置没有一点问题，它出错仅仅是因为request的Accept
比方说，响应成功了怎么怎么样，响应失败了怎么怎么样。但是怎么知道是成功还是失败呢？...status 的代码，那么不管请求成功还是失败，这个判断一定是可以被正常执行的。...也就是说，我们需要加一层判断，确保收到服务器的响应结果之后，再去判断请求成功还是失败。...捕获这个错误。 4.3 overrideMimeType() 方法 服务器返回的响应头中有一个是 Content-Type，用以告诉客户端返回的资源类型（MIME）以及应该用什么编码去解码。...但可能存在一种情况：虽然服务器返回数据是 XML，但 MIME 类型指定为 text/plain，那么这时候客户端就会当作纯文本去处理了，这显然不对，所以我们可以利用 overrideMineType(
,可以考虑增加更多的headers允许,比如: •第二步:其它更多配置,如果第一步进行了后,仍然有跨域问题，可能是: ∷接口中有限制死一些请求类型(比如写死了POST等)，这时候请去除限制 ∷接口中...如何分析ajax跨域 上述已经介绍了跨域的原理以及如何解决，但实际过程中，发现仍然有很多人对照着类似的文档无法解决跨域问题，主要体现在，前端人员不知道什么时候是跨域问题造成的，什么时候不是，因此这里稍微介绍下如何分析一个请求是否跨域...，我们可以清晰的看到，接口返回的响应头域中，包括了 所以浏览器接收到响应时，判断的是正确的请求，自然不会报错，成功的拿到了响应数据。...示例二(跨域错误的ajax请求) 为了方便，我们仍然拿上面的错误表现示例举例。...示例三(与跨域无关的ajax请求) 当然，也并不是所有的ajax请求错误都与跨域有关，所以请不要混淆，比如以下: 比如这个请求，它的跨域配置没有一点问题，它出错仅仅是因为request的Accept和
如何分析ajax跨域 上述已经介绍了跨域的原理以及如何解决，但实际过程中，发现仍然有很多人对照着类似的文档无法解决跨域问题，主要体现在，前端人员不知道什么时候是跨域问题造成的，什么时候不是，因此这里稍微介绍下如何分析一个请求是否跨域...， F12打开 DevTools 发送ajax请求 右侧面板-> NetWork-> XHR，然后找到刚才的ajax请求，点进去 示例一(正常的ajax请求) 上述请求是一个正确的请求...，判断的是正确的请求，自然不会报错，成功的拿到了响应数据。...示例二(跨域错误的ajax请求) 为了方便，我们仍然拿上面的错误表现示例举例。...示例三(与跨域无关的ajax请求) 当然，也并不是所有的ajax请求错误都与跨域有关，所以请不要混淆，比如以下: 比如这个请求，它的跨域配置没有一点问题，它出错仅仅是因为request的 Accept
比方说，响应成功了怎么怎么样，响应失败了怎么怎么样。但是怎么知道是成功还是失败呢？...status 的代码，那么不管请求成功还是失败，这个判断一定是可以被正常执行的。...捕获这个错误。 4.3 overrideMimeType() 方法 服务器返回的响应头中有一个是 Content-Type，用以告诉客户端返回的资源类型（MIME）以及应该用什么编码去解码。...但可能存在一种情况：虽然服务器返回数据是 XML，但 MIME 类型指定为 text/plain，那么这时候客户端就会当作纯文本去处理了，这显然不对，所以我们可以利用 overrideMineType(...也就是说，发送请求前它确实拿不到这个 Cookie（是浏览器给请求报文加上的，不是我们），但接受到响应后它的的确确拿到了，于是事情一发不可收拾…… 另外，这里要注意， 跨域请求能发出去，服务端能收到请求并正常返回结果
工作原理 Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。...更多响应码可以查看W3C文档。在下面的例子中，我们通过检查响应码 200 OK 区别对待成功和不成功的AJAX调用。...Note: 如果你向一个代码片段发送请求，将返回XML，而不是静态XML文件，在IE浏览器上则必须要设置响应头才能正常工作。...这次我们用 JavaScript 请求动态页面，test.php 并返回一个计算后的字符串 - “Hello, [user date]”，并用 alert() 出来。...可是，服务器会返回计算后的内容和原内容。
success() 当请求成功时回调的函数 用法： $.post("test.php", { name: "John", time: "2pm" }, ...success 类型：Function 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态。 ... 3 － （交互）正在解析响应内容 4 － （完成）响应内容解析完成，可以在客户端调用了 XMLHttpRequest.status: 1xx-信息提示 这些状态代码表示临时的响应...客户端在收到常规响应之前，应准备接收一个或多个1xx响应。 100-继续。 101-切换协议。 2xx-成功 这类状态代码表明服务器成功地接受了客户端请求。...502-Web服务器用作网关或代理服务器时收到了无效响应。 502.1-CGI应用程序超时。 502.2-CGI应用程序出错。application. 503-服务不可用。
Ajax介绍 同步——客户端发起请求，服务端需要处理，响应，此时客户端完全等待，当服务器处理完毕，客户端重新载入页面，如果出现错误，再次发生请求，处理，等待......一个响应包含三部分： 1 数字和文字组成的状态码，显示请求成功还是失败； 2 响应头，包含许多有用的信息，如服务器类型、日期时间、内容类型和长度； 3 响应体，相应正文； HTTP状态码 1XX：信息类...，收到WEB浏览器请求，正在进一步处理中； 2XX:：成功，表示用户请求被正确接收，理解和处理 如200 OK 3XX：重定向，表示没有请求成功，客户必须采取进一步的动作 4XX：客户端错误，表示客户端提交的请求有错误...请求完成，相应就绪，也就是响应完成 PHP-AJAX实例 运行PHP XAMMP，https://www.apachefriends.org/download.html 在Dreamweaver中配置...); eval方法存在安全性问题，不仅解析字符串，还会解析JS方法。
=null){ //2.打开操作 //参数1：请求的方式 get，post //参数2：请求的地址 index.php ajax.php //参数3：是否异步请求 true...对象已创建，未调用 open ； 1：open 方法成功调用，但 Sendf 方法未调用； 2：send 方法已经调用，尚未开始接受数据； 3：正在接受数据。...Http 响应头信息已经接受，但尚未接收完成； 4：完成，即响应数据接受完成。 我们在回调的时候，如果直接 console 接收的数据，打印出多条数据。 ?...status ： 服务器返回的 http 状态码。 200 表示“成功”； 404 表示“未找到”； 500 表示“服务器内部错误”等。 所以要判断异步请求成功并且服务器返回状态正常，再进行数据打印。...responseText ：服务器响应的文本内容。 responseXML ：服务器响应的XML内容对应的DOM对象。 statusText ：服务器返回状态的文本信息。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
