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的头文件信息是前端开发中必须掌握的一个技能，下面就来看看具体的头文件信息。 ?
请求只应当用于取回数据 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——服务器上不再有此资源且无进一步的参考地址
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
1：请求已经建立，但是还没有发送（还没有调用 send() ）。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。...3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 4：响应已完成；您可以获取并使用服务器的响应了。...使用JSON.parse(xhr.responseText)转化为 JSON 对象 2、遍历得到的数组，向 DOM 中添加新元素 function example(responseText){ var...== 4){ if (ajx.status == 200 && ajx.status<300)//200 是 HTTP 请求成功的状态码 { //请求成功处理数据 success &&...，则采用 GET 方式传递，反之，采用 POST 回调参数 必须在加载完成后才执行的操作，该函数有三个参数 分别代表请求返回的内容、请求状态、XMLHttpRequest 对象 只要请求完成，回调函数就会被触发
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技术向服务器发送异步请求；...send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。 注意：若没有参数，需要给出null为参数！...下面介绍一下XMLHttpRequest对象的5种状态： 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法； 1：请求已开始，open()方法已调用，但还没调用...send()方法； 2：请求发送完成状态，send()方法已调用； 3：开始读取服务器响应； 4：读取服务器响应结束。
当文件框发生了输入变化时，浏览器会使用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 请求载入信息。
:200px;height:200px;" id="mydiv"> //定义点击事件 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),
前情回顾 在说今天的问题之前先来回顾一下有关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中配置
一、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是开发者的梦想，因为你可以： 在不重新加载页面的情况下更新网页 在页面加载后请求来自服务器的数据 在页面加载后接收来自服务器的数据 在后台向服务器发送数据 HTML页面 <!...GET比POST更简单更快，并且在大多数情况下都可以使用。 但是，在以下情况下始终使用POST请求： 无法使用缓存文件（更新服务器上的文件或数据库）。 向服务器发送大量数据（POST没有大小限制）。...", true); xhttp.send(); 要像HTML表单一样发送POST数据，请使用setRequestHeader()添加带有HTTP头的请求。...0：请求未初始化 1：服务器连接已建立 2：接收请求 3：处理请求 4：请求完成且响应准备就绪 status 属性 200："OK" 403："Forbidden" 404："Page not...当 readyState 为 4 且 status 为 200 时，表示响应已准备好。
并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。...，如下也是： 0 (未初始化) or (请求还未初始化) 1 (正在加载) or (已建立服务器链接) 2 (加载成功) or (请求已接受) 3 (交互) or (正在处理请求) 4 (完成) or...(请求已完成并且响应已准备好) 接下来，判断HTTP响应的 response code。...注意这个例子我们只是用了JavaScript，没有用jQuery。而且，HTML，XML和PHP文件都要放在用一个目录下。...Note: 如果你向一个代码片段发送请求，将返回XML，而不是静态XML文件，在IE浏览器上则必须要设置响应头才能正常工作。
username=admin&password=admin POST 请求： POST 请求用于向服务器发送被处理的数据，提交表单既可以使用GET，也可以使用POST方式，推荐使用POST方式，查询数据的时候推荐使用...GET方式 GET：没有请求体，但空行是存在的，附带的参数有限制，数据容量不能超过1k POST：存在请求体，可以在请求的实体内容中向服务器发送数据，传送的数据量是无限制的 (2) GET 方式请求的格式...，只需要在send方法汇总传入一个null值即可了 (2) POST 方式请求的格式： 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头...=3 求正在处理中：浏览器与服务器建立通信之后，但服务器未完成响应之前 readyState=4 求已完成：请求完成后，并且已从服务器完全接收到响应数据 状态码 解释 200 请求成功 302 请求重定向...，到现在为止，如何发起并且接收响应已经不在话下了，并且我们对 AJAX 有了一定的认识，但是 AJAX 的一些应用场景，以及AJAX 如何搭配 常见的 如 JSON 等数据格式，实现前后端的交互，并没有提到
异步编程——Ajax 一、什么是Ajax 二、Ajax的优缺点 （1）优点 （2）缺点 三、Ajax的使用 （1）状态码 （2）xhr的基本使用 （3）发送get请求 （4）发送post请求 四、封装Ajax...，规定返回的数据类型为 json，同时设定了一个回调函数用于接收请求返回的数据、状态和xhr对象 发送post请求 $.post('example.php', {query: 4, em: 0}, function...) 这段代码发送了一个 post 请求，携带的参数有 query 值为 4 、em 值为 0，规定返回的数据类型为 json，同时设定了一个回调函数用于接收请求返回的数据、状态和xhr对象 综合方法 /...(xhr.status) // 请求失败，返回状态码 } } } }) } } 五、Ajax的约束 默认情况下，Ajax一般只能向同源的域发送请求，这是受到了浏览器的同源策略的限制...现在的大部分浏览器几乎都支持了在发送Ajax请求后，自动向请求头部添加当前的源信息 六、结束语 建议你们好好了解JS的Ajax的使用，这样在面试中问起来你还能说出个一二三，并且有时候面试官还会直接让你亲手写一个简单的
，请求方式有表单POST提交、AJAX-POST请求 ①.POST /user HTTP/1.1 客户端想向服务器添加一条新录 uname=tom&upwd=123 (3).PUT...(1).请求消息 ①.请求起始行(Start line) A.请求方法 a.GET(客户端想获得服务器端的信息) b.POST(客户端想传递数据给服务器) c.PUT(客户端想放置文件到服务器上) d.DELETE...即异步javascript and xml，该技术由google 推出，最大不同：发送请求和接收数据都由Js完成，以下为Ajax代码固定Js，请求并且接收响应4步: (1).创建ajax对象 var xhr...(2).ajax作用：实现在'无刷新''无提交''无跳转'的情况下完成页面局部更新 (3).ajax应用常见场合：聊天室，在线走势图,搜索建议 (4).ajax的异步相关 ①.异步请求:XHR ②.同步请求...发生任何状态变化时的事件控制对象 ②.xhr.readyState 表示请求的状态，每次改变时候触发事件0 /1 /2 /3 /4 20.AJAX post 标准语法 (1).创建ajax对象 xhr
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
