ajax原理 AJAX是基于现有的Internet标准，并且联合使用它们： XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式...0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status 200: "OK" 404: 未找到页面...0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status 200: "OK" 404: 未找到页面 在 onreadystatechange...AJAX - 向服务器发送请求请求 方法 描述 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。...string：仅用于 POST 请求 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） send(string) 将请求发送到服务器
简单来讲ajax完成的是局部刷新与异步交互。...", "/ajax_test/", true); 3.向服务端发送请求 post请求，发送的是个字符串，相当于post请求中的键值 xmlHttp.send("massage=ajax&username...5种状态，每个状态对应着一个值： 0：只是创建了XMLHttpRequest对象，还未调用open()方法； 1：open()方法已调用，但还没调用send()方法 2：send()方法已调用 3：开始读取服务器响应...2.post请求需要设置请求头信息xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)，否则服务器端会忽略请求体中的数据...完成json数据发送 $.ajax({ url:'/handle_ajax/', data:{message:'ajax'}, type:'post', success:
状态码中常见的两个，当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。...需要掌握的常见http状态码大致有以下一些： 101：切换协议，服务器根据客户端的请求切换协议 **200：请求成功。...使用GET请求重定向 **404：客户端请求失败** 408：请求超时 **500：内部服务器错误，无法完成请求** 505:服务器不支持请求的HTTP协议的版本，无法完成处理 十.不可忽视的HTTP头文件...http请求中的一个重要关注点就是请求头和响应头的内容，从这两个头文件中可以看出很多东西，当我们用发送一个ajax请求的时候，如果没有达到预期的效果，那么就需要打开浏览器的调试工具，从NetWork中找到相应的...所以学会看http的头文件信息是前端开发中必须掌握的一个技能，下面就来看看具体的头文件信息。 ?
通过 AJAX 可以在浏览器中向服务器发送异步请求 最大的优势：无刷新获取数据。...form-data 用于文件上传请求 2.6 常见的响应状态码 200 OK 请求成功。...一般用于GET 与POST 请求 201 Created 已创建。...服务器内部错误，无法完成请求 // 判断(服务端返回了所有的结果) if (xhr.readyState === 4) { //判断响应码 200 404 403...不同类型的请求及其作用 GET: 从服务器端读取数据（查） POST: 向服务器端添加新数据 （增） PUT: 更新服务器端已经数据 （改） DELETE: 删除服务器端数据 （删） 2.8 区别 一般
AJAX 2018-9-6 14:42:53 AJAX简介 HTTP协议------>HTTP权威指南 请求:客户端去向服务端请求一个文件 响应:服务端把对应的文件内容返回给客户端,一般服务端有输出才算真正的响应...状态 名称 描述 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。...1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。...responseText 服务器接收到的响应体（不包括头部），如果还没有接收到数据的话，就是空字符串。 status 由服务器返回的 HTTP 状态代码，如 200 表示成功。...send() 发送 HTTP 请求，get方法无参，post方式有可选参。 setRequestHeader() 向一个打开但未发送的请求设置或添加一个 HTTP 请求。
请求只应当用于取回数据 POST方法: 通常用来向指定的资源提交要被处理的数据 POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 请求对数据长度没有要求 POST方法主要是向服务器提交数据...并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 2 － （载入完成/数据接收） 此阶段接收服务器端的响应数据。...4**：请求包含一个错误语法或不能完成 5**：服务器执行一个完全有效请求失败 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 200——交易成功 201——提示知道新文件的...URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整 204——请求收到，但返回信息为空 205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件 206——服务器已经完成了部分用户的...407——类似401，用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求 409——对当前资源状态，请求不能完成 410——服务器上不再有此资源且无进一步的参考地址
1：请求已经建立，但是还没有发送（还没有调用 send() ）。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。...3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 4：响应已完成；您可以获取并使用服务器的响应了。...使用JSON.parse(xhr.responseText)转化为 JSON 对象 2、遍历得到的数组，向 DOM 中添加新元素 function example(responseText){ var...== 4){ if (ajx.status == 200 && ajx.status200 是 HTTP 请求成功的状态码 { //请求成功处理数据 success &&...，则采用 GET 方式传递，反之，采用 POST 回调参数 必须在加载完成后才执行的操作，该函数有三个参数 分别代表请求返回的内容、请求状态、XMLHttpRequest 对象 只要请求完成，回调函数就会被触发
status——从服务器返回的数字代码，如404(未找到)和200(已就绪)。 status Text——伴随状态码的字符串信息。 readyState——对象状态值。...对象状态值有以下几个： 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法，正在发送请求 2 - (载入完成)send()方法执行完成 3 - (交互...)正在解析响应内容 4 - (完成)响应内容解析完成，可以在客户端调用了 对于readyState的状态值，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态(得到信息)我们大多数采用...然而，在以下情况中，请使用 POST 请求： 无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时，POST 比 GET...t=" + Math.random(),true); xmlhttp.send(); 如果希望通过 GET 方法发送信息，向 URL 添加信息： xmlhttp.open("GET","demo_get2
当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。...整个过程中页面没有刷新，只是局部刷新了； 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作； AJAX的优缺点 优点： AJAX使用Javascript技术向服务器发送异步请求；...send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。 注意：若没有参数，需要给出null为参数！...下面介绍一下XMLHttpRequest对象的5种状态： 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法； 1：请求已开始，open()方法已调用，但还没调用...send()方法； 2：请求发送完成状态，send()方法已调用； 3：开始读取服务器响应； 4：读取服务器响应结束。
浏览器与服务器交互 在Web服务器中，请求资源又分为静态资源和动态资源。 静态资源的特点：只要服务器没有修改这些文件，客户端每次请求到的都是同样的内容。...注意：如果请求声明为同步，该方法将会等待请求完成或者超时才会返回，否则此方法将立即返回。 在进行Ajax开发时，经常使用GET方式或POST方式发送请求。 GET方式适合从服务器获取数据。...POST方式适合向服务器发送数据。需要设置内容的编码格式，告知服务器用什么样的格式来解析数据。 Ajax对象发送请求的方法。...当服务器响应后，再来处理Ajax对象获取到的响应结果。 同步方式：是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码。...获取响应信息：responseText属性、responseXML属性等 当请求服务器成功且数据接收完成时，可以使用Ajax对象提供的相关属性获取服务器的响应信息。
1：表示已调用open方法，但还未调用send方法（请求还未被发送出去），仍然可以使用setRequestHeader()，设定HTTP请求的头信息。...2：表示send方法已调用，数据已发送，并且服务器接收到了请求。 3：表示服务器正在传输数据。 4：表示数据传输完成。...2、status 只读属性，表示本次请求所得到的HTTP状态码，返回一个整数。一般来说，如果通信成功的话，这个状态码是200。...| 3、 statusText 与status属性类似，返回本次请求的状态，不同点在于，status只返回一个数字，而该属性返回一个字符串 ，包含整个状态信息，比如”200 OK“| 4、responseType...如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。
当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。...整个过程中页面没有刷新，只是局部刷新了； 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作； AJAX的优缺点 优点： AJAX使用Javascript技术向服务器发送异步请求； AJAX...，即status==200; complete：当请求完成时调用函数，即status==404、403、302...只要不出错就行。...下面介绍一下XMLHttpRequest对象的5种状态： 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法； 1：请求已开始，open()方法已调用，但还没调用...send()方法； 2：请求发送完成状态，send()方法已调用； 3：开始读取服务器响应； 4：读取服务器响应结束。
像 — 些数据验证和数据处理等都交给 Ajax引擎自己来做, ，只有确定需要从服务器 读取新数据时再由 Ajax 引擎代为向服务器提交请求。 来看看和传统方式的区别 ? ?...readyState 属性可能的值： 我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成 ( 意味着可获得数据 ) ：...0: 请求未初始化。 1: 服务器连接已建立。 2: 请求已接收。 3: 请求处理中。 4: 请求已完成，且响应已就绪。.... setRequestHeader ( "Content-type" , "application/x-www-form-urlencoded;charset=UTF-8" ); // 向请求添加...: 成功函数 datatype 返回的数据 3.4 post() 方法通过远程 HTTP GET 请求载入信息。
前情回顾 在说今天的问题之前先来回顾一下有关Ajax的相关内容 Ajax的优缺点 AJAX使用Javascript技术向服务器发送异步请求； AJAX无须刷新整个页面； 因为服务器响应内容不再是整个页面...send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。 注意：若没有参数，需要给出null为参数！...下面介绍一下XMLHttpRequest对象的5种状态： 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法； 1：请求已开始，open()方法已调用，但还没调用...send()方法； 2：请求发送完成状态，send()方法已调用； 3：开始读取服务器响应； 4：读取服务器响应结束。...7.2 案例分析 页面中给出注册表单； 在username表单字段中添加onblur事件，调用send()方法； send()方法获取username表单字段的内容，向服务器发送异步请求，参数为username
HTTP请求过程： 1 建立TCP连接； 2 Web浏览器向Web服务器发送请求命令 3 浏览器发送请求头信息 4 服务器应答 5 服务器发送应答头信息 6 服务器向浏览器发送数据 7 服务器关闭TCP...（添加在书签里的页面今后也能使用）（幂等） POST：发送信息，修改服务器资源，不可见，嵌入HTTP请求体中，发送信息的数量无限制，常用新建修改删除等操作。...，收到WEB浏览器请求，正在进一步处理中； 2XX:：成功，表示用户请求被正确接收，理解和处理 如200 OK 3XX：重定向，表示没有请求成功，客户必须采取进一步的动作 4XX：客户端错误，表示客户端提交的请求有错误...属性：该属性变化表示服务器响应的变化 *0：请求未初始化，open还未调用 *1：服务器连接已建立，open已经调用了 *2：请求已接收，也就是接收到头信息了 *3：请求处理中，接收到相应主体了 *4：...请求完成，相应就绪，也就是响应完成 PHP-AJAX实例 运行PHP XAMMP，https://www.apachefriends.org/download.html 在Dreamweaver中配置
:200px;height:200px;" id="mydiv"> Ajax()" value="发送Ajax 请求改变内容" /...> //定义点击事件 Ajax() 页面显示效果如下： 第二步：新建一个 formInfo.json 文件，里面存放将要更新的内容 { "name":"ys",...④、发送请求 send() send(content) 向服务器发出请求，如果采用异步方式，该方法会立即返回。...1、jQuery 的 Ajax 请求： $.ajax({ type : "post", //请求方式 url : ".....); }, "json" ); 3、jQuery 的 post 请求 $.post(url,data,success(response,status,xhr),
一、jQuery实现的ajax 首先说一下ajax的优缺点 优点： AJAX使用Javascript技术向服务器发送异步请求； AJAX无须刷新整个页面； 因为服务器响应内容不再是整个页面，而是页面中的局部...send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。 注意：若没有参数，需要给出null为参数！...下面介绍一下XMLHttpRequest对象的5种状态： 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法； 1：请求已开始，open()方法已调用，但还没调用...send()方法； 2：请求发送完成状态，send()方法已调用； 3：开始读取服务器响应； 4：读取服务器响应结束。...7.2 案例分析 页面中给出注册表单； 在username表单字段中添加onblur事件，调用send()方法； send()方法获取username表单字段的内容，向服务器发送异步请求，参数为username
它可以发送和接收各种格式的信息，包括JSON，XML，HTML和文本文件。AJAX最吸引人的特点是其“异步”特性，这意味着它可以与服务器通信，交换数据和更新页面，而不必刷新页面。...AJAX的两个主要功能使您可以执行以下操作： 向服务器发出请求，而无需重新加载页面 从服务器接收和处理数据 步骤1 –如何发出HTTP请求 为了使用JavaScript向服务器发出HTTP请求，您需要一个具有必要功能的对象实例...这是AJAX中的第一个A。 send()如果POST-ing请求，则该方法的参数可以是您要发送到服务器的任何数据。...） 1（正在加载）或（已建立服务器连接） 2（已加载）或（已收到请求） 3（交互式）或（处理请求） 4（完成）或（请求已完成，响应已准备就绪） 接下来，检查HTTP响应的HTTP响应状态代码 。...在以下示例中，我们通过检查200 OK响应代码来区分AJAX调用成功与否。 if (httpRequest.status === 200) { // Perfect!
并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。...，如下也是： 0 (未初始化) or (请求还未初始化) 1 (正在加载) or (已建立服务器链接) 2 (加载成功) or (请求已接受) 3 (交互) or (正在处理请求) 4 (完成) or...(请求已完成并且响应已准备好) 接下来，判断HTTP响应的 response code。...注意这个例子我们只是用了JavaScript，没有用jQuery。而且，HTML，XML和PHP文件都要放在用一个目录下。...Note: 如果你向一个代码片段发送请求，将返回XML，而不是静态XML文件，在IE浏览器上则必须要设置响应头才能正常工作。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
