Ajax是一种可以与服务器交换数据并更新部分页面内容，同时可以在不让整个网页重新加载的情况下更新网页的一种技术 Ajax请求过程： 1：创建一个异步对象 var xmlHttp = new XMLHttpRequest...//如果出现中文也可以用encodeURIComponent方法转换 // POST方式的url不能在后面接字符串传递参数 xmlHttp.setRequestHeader("Content-type...，因此还需判断是否请求成功 //status是专门判断请求是否成功的状态码 // 状态码大于或等于200并且不能超过300以上，300以上除了304以外全都是请求失败...* @param {请求成功后执行的函数*} option.sucess * @param {请求失败后执行的函数*} option.error */ function createAjax(option...(form.method,form.action,true); xhr.send(formdata); xhr.onreadystatechange =()=>{
4 DONE Ajax请求完成，这意味着数据传输已经彻底完成或失败 使用xhr发起带参数的GET请求 使用xhr对象发起带参数的get请求时，只需在调用xhr.open期间，为URL地址指定参数即可...在URL地址中不允许出现中文字符。 如果URL中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。...前端领域，经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少，所以，我们重点要学习的数据交换格式JSON。 ...对象结构：对象结构在JSON中表示为{}括起来的内容，数据结构为{key:value,key:value,…}的键值对结构，其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字...let fd = new FormData(form); let xhr = new XMLHttpRequest(); xhr.open('post
自动更新页面 AJAX 包含以下五个部分： ajax 并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 使用 CSS 和 XHTML 来表示。 使用 DOM 模型来交互和动态显示。...这其中最关键的一步就是从服务器获得请求数据。...把字符串转化成对象，使用 jsonp 时，script 标志会解析并执行返回的代码，等我们处理数据时，已经是一个 JavaScript 对象了 注意浏览器的缓存问题 在末尾增加一个随机数可避免频繁请求同一个链接出现的缓存问题...key / value 数据 callback(可选) Function 请求完成时的回调函数，无论是请求成功还是失败 $.get()和$.post()方法 load()方法通常用来从 web 服务器上获取静态的数据文件...请求完成后的回调函数（请求成功或失败时都调用）参数：XMLHttpRequest 对象和一个描述成功请求类型的字符串function(XMLHttpRequest,textStatus){this;/
} xhr.send(); }, // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式 post:...Promise有三种状态：等待pending、成功fulfied、失败rejected；状态一旦改变，就不会再变化，在Promise对象创建后，会马上执行。...任一一种情况出现时，Promise对象的 then 方法就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，均为 Function。...应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式 post: function(url,data,callback){ var...任一一种情况出现时，Promise对象的 then 方法就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，均为 Function。
轮廓：输入有效的长网址并进行缩短，出现一个弹出框，其中包含一个短网址和一个保存按钮（编辑或保存短网址）单击保存按钮后，页面重新加载，并显示创建的短网址、源网址等信息。 复制代码 包含四个字段：id、shorten_url、full_url和clicks。 id字段是一个自增的整数类型，作为主键使用。...shorten_url字段是一个长度为200的非空字符串，用于保存缩短后的URL。full_url字段是一个长度为1000的非空字符串，用于保存完整的URL。...); xhr.send(formData); }轮廓：输入有效的长网址并进行缩短，出现一个弹出框，其中包含一个短网址和一个保存按钮（编辑或保存短网址）单击保存按钮后，页面重新加载，并显示创建的短网址...shorten_url字段是一个长度为200的非空字符串，用于保存缩短后的URL。full_url字段是一个长度为1000的非空字符串，用于保存完整的URL。
也就是在不需要重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页不使用ajax，如果需要更新内容，必须重新加载整个页面。...ajax请求原理：创建一个网络请求对象 -> 发送连接请求 -> 发送请求数据 -> 检查网络请求对象的状态 -> 如果响应成功了 -> 浏览器接收返回数据并更新网页。...|| xhr.status==304 ){ console.log("请求成功",xhr.responseXML) }else{ console.log("请求失败") } }...responseText ---> 获取到的是字符串形式。接收到可直接使用，无需转换。...("请求成功",xhr.response) // 请求成功 abc }else{ console.log("请求失败") } } } 1.txt 文档内容为 abc。
--4(完成)响应内容解析完成,可以在客户端调用(完成并不一定成功,需要status来检测是成功还是失败) 2....--status属性:请求结果,是成功(200)还是失败(404):oAjax.status==200 3..../判断是否传入失败是的函数,即用户是否关心失败时的结果 fnFaild(oAjax.responseText); //对失败的原因做出处理 }...("POST",url,true); //设置头信息 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded...45 fnSuccess(oAjax.responseText); //成功时执行的函数 46 }else{ 47 if(fnFaild){ //判断是否传入失败是的函数
轮廓：输入有效的长网址并进行缩短，出现一个弹出框，其中包含一个短网址和一个保存按钮（编辑或保存短网址）单击保存按钮后，页面重新加载，并显示创建的短网址、源网址等信息。 包含四个字段：id、shorten_url、full_url和clicks。 id字段是一个自增的整数类型，作为主键使用。...shorten_url字段是一个长度为200的非空字符串，用于保存缩短后的URL。full_url字段是一个长度为1000的非空字符串，用于保存完整的URL。...xhr.open("POST", "php/url-controll.php", true); xhr.onload = ()=>{ if(xhr.readyState == 4...= new XMLHttpRequest(); xhr2.open("POST", "php/save-url.php", true);
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。...error(xhr,status,error) 如果请求失败要运行的函数。 global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。...ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 jsonp 在一个 jsonp 中重写回调函数的字符串。...success(result,status,xhr) 当请求成功时运行的函数。 timeout 在设置本地的请求超时时间（以毫秒计）。..."POST", //默认值: "GET"请求方式 ("POST" 或 "GET") data: { //提交的数据，将自动转换为请求字符串格式
例如，当请求成功时，状态码为200。 另外还有一个类似的属性statusText，值为字符型数据，包含了描述短语，如“200 OK”。...属性名 说明 responseText 将响应信息作为字符串返回 responseXML 将响应信息格式化为XML Document对象并返回（只读） responseXML属性在请求失败或相应内容无法解析时的值为...); } }; xhr.open('GET', 'hello.php'); xhr.send(); URL参数编码转换 在通过URL参数传递数据时，如果参数中包含特殊字符可能会出现问题。...字符串 var xhr = new XMLHttpRequest(); xhr.open('POST', 'json.php'); xhr.onreadystatechange = function()...err); }); xhr({url: '1.txt', type: 'POST', data: fd}) .then(function(data) { console.log('请求成功
2.success(data,status,xhr):请求成功之后回调用，传入返回的数据，以及包含成功的代码代码片段 3.error(xhr,errorType,error...（超时，解析错误，或者状态码不在HTTP 2xx） 4.complete(xhr,status):请求成功时调用，无论请求失败或成功。...6.ajaxComplete (data: xhr, options)：请求已经完成后，无论请求是成功或者失败。 ...另外，一个css选择器可以在url中指定，像这样，可以使用匹配selector选择 器的HTML内容来更新集合。 ...表单方法： 111.serialize serialize() 类型string 在Ajax post 请求中将用作提交的表单元素的值编译成URL编码的字符串。
四、Ajax的出现解决了什么问题 在 Ajax出现之前， web程序是这样工作的： ?...这种 GET或 POST请求中 URL参数里的 "callback"部分。 error 类型： Function 。请求失败时调用此函数。...text": 返回纯文本字符串 data 类型： String 使用 JSON.stringify转码 complete 类型： Function请求完成后回调函数 (请求成功或失败之后均调用)。...确实MDN-使用Fetch这里的文档更新的有些不及时，误人子弟了......Response对象 Response对象是 fetch调用成功后的返回值： 回顾下 fetch 中对Response`的操作： xhr.onload = function () {
JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，...('Content-Type', 'application/x-www-form-urlencoded') 然后我们上面也说过，send() 方法接收的一个参数是请求主体发送的数据，所以我们的post请求要发送的数据就要作为该方法的参数...'post', 'example.php') xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send...// 是否异步请求 }) .then(data => { console.log(`请求成功，数据为${data}`) }) .catch(err => { console.log(`请求失败，状态为...promise 实现的，即该方法返回一个 promise 对象，在 then 函数中处理请求成功的情况，在 catch 函数中处理请求失败的情况 若没有了解过 promise 的小伙伴建议先花几分钟了解一下
而通过使用ajax可以在后台与服务器进行少量数据交换， 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。...它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的 XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。...| 3、 statusText 与status属性类似，返回本次请求的状态，不同点在于，status只返回一个数字，而该属性返回一个字符串 ，包含整个状态信息，比如”200 OK“| 4、responseType...如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。...('post', options.url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded
一、什么是Ajax Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互...('Content-Type', 'application/x-www-form-urlencoded') 然后我们上面也说过，send() 方法接收的一个参数是请求主体发送的数据，所以我们的post...() xhr.open('post', 'example.php') xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded...promise 实现的，即该方法返回一个 promise 对象，在 then 函数中处理请求成功的情况，在 catch 函数中处理请求失败的情况 若没有了解过 promise 的小伙伴建议先花几分钟了解一下...对象有一定的兼容性，因此我们在封装ajax方法之前可以先封装一个方法用来动态创建一个兼容性稍微好点的XHR对象（其中主要是兼容IE5和IE6） 我们都知道JQuery都是将方法封装在一个名为 $ 的对象中的
设置请求行 post请求的参数列表在请求体 xhr.open("post", "02.php"); // 2....返回类型 json 接口返回：{ "code":"101", "msg":"手机号码存在", "mobile":"18511249258" } 参数说明: code 当前业务逻辑的处理成功失败的标识...":"Jepson" } 参数说明: code 当前业务逻辑的处理成功失败的标识 100:成功 101:用户存在 102:验证码错误 msg 当前系统返回给前端提示...那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。...实例化一个formData对象， new formData(form); form就是表单元素 2. formData对象可以直接作为 xhr.send(formData)的参数。
complete(xhr，status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后） contentType 发送数据到服务器时所使用的内容类型。...(data，type) 用于处理 XMLHttpRequest 原始响应数据的函数 dataType 预期的服务器响应的数据类型 error(xhr，status，error) 如果请求失败要运行的函数...processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。...默认是 true scriptCharset 规定请求的字符集 success(result，status，xhr) 当请求成功时运行的函数 timeout 设置本地的请求超时时间（以毫秒计） traditional...:function(xhr){ // 请求前的处理 }, success:function(result, status, xhr){ // 请求成功时处理
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
