运行在本地的 3002 端口上,并且设置跨域,允许从 http://127.0.0.1:5500 访问。 油猴脚本 先简单写一个插入 我是油猴脚本的文本 的脚本,后边再进行修改。...不是可写的,我们将原型对象上的 responseText 属性描述符打印一下。...image-20220824084726967 可以看到 set 属性是 undefined ,因此我们重写 responseText 失败了。...我们无法修改原型对象上的 responseText ,我们可以在当前 xhr 对象,也就是 this 上边定义一个同名的 responseText 属性,赋值的话有两种思路。...需要注意的是,上边方案都只是重写了 responseText 字段,不排除有的网站读取的是 response 字段,但修改的话和上边是一样的,这里就不写了。
参数指定是否使用异步请求,其值为true或false send(content) 发送请求 content参数指定请求的参数 setRequestHeader(header,value) 设置请求的头信息 常用属性...对象没有完成初始化 1 XMLHttpRequest对象开始发送请求 2 XMLHttpRequest对象的请求发送完成 3 XMLHttpRequest对象开始读取响应,还没有结束 4 XMLHttpRequest...对象读取响应结束 常用属性 status:HTTP的状态码 responseText:获得响应的文本内容 responseXML:获得响应的XML文档对象 状态码 说 明 200 服务器响应正常...400 无法找到请求的资源 403 没有访问权限 404 访问的资源不存在 500 服务器内部错误 使用Ajax验证用户名 实现无刷新用户名验证 当用户名文本框失去焦点时,发送请求到服务器,判断用户名是否存在...搜索框会出提示 搜索提示的原理 1、每输入完一个关键字时,向服务器发送一个请求 2、服务器根据用户输入的关键字,从数据库中搜索相关关键字信息,并返回到客户端
二、老版本的缺点 老版本的XMLHttpRequest对象有以下几个缺点: * 只支持文本数据的传送,无法用来读取和上传二进制文件。 ...四、HTTP请求的时限 有时,ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。...xhr.overrideMimeType("text/plain; charset=x-user-defined"); 然后,用responseText属性接收服务器返回的二进制数据。 ...八、接收二进制数据(方法B:responseType属性) 从服务器取回二进制数据,较新的方法是使用新增的responseType属性。如果服务器返回文本数据,这个属性的值是"TEXT",这是默认值。...var blob = new Blob([xhr.response], {type: 'image/png'}); 注意,是读取xhr.response,而不是xhr.responseText。
像一些数据验证和数据处理等都交给Ajax 引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax 引擎代为向服务器提交请求。...、 Firefox 浏览器 中创建 XMLHttpRequest 对象的方式 var XMLHttpRequest = new XMLHttpRequest(); 由于无法确定用户使用的是什么浏览器,所以在创建...用于说明 XMLHttpRequest 对象从哪里获取数据。...此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。...readystatechange 事件调用一个函数,在函数里判断 XMLHttpRequest 对象的 readyState 属性值,如果readyState === 4 则使用 responseText
--返回值responseText:从服务器返回来的文本:oAjax.responseText (返回的值是一个字符串,有时需要进一步处理成其他格式的形式) oAjax.onreadystatechange...if(oAjax.status==200){ //读取的结果是成功 alert('成功:'+oAjax.responseText); } } ...,是undefined //IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用 if (window.XMLHttpRequest) { ... if(oAjax.status==200){ //读取的结果是成功 fnSuccess(oAjax.responseText); //成功时执行的函数 ...,是undefined 28 //IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用 29 if (window.XMLHttpRequest) { 30
1.2 XMLHttpRequest 说明 1.2.1 XMLHttpRequest 相关属性 ☞ readyState HTTP 请求的状态,当一个 XMLHttpRequest 初次创建时,这个属性的值从...当 readyState 小于 3 的时候读取这一属性会导致一个异常。 ☞ statusText 这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。...和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。...如果本次请求没有成功或者数据不完整,该属性等于 null ☞ responseText 目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。...☞ 监听函数 xhr.onload = function() { var responseText = xhr.responseText; console.log(responseText); };
像 — 些数据验证和数据处理等都交给 Ajax引擎自己来做, ,只有确定需要从服务器 读取新数据时再由 Ajax 引擎代为向服务器提交请求。 来看看和传统方式的区别 ? ?...1.4 XMLHttpRequest常用属性 1. onreadystatechange 属性 onreadystatechange 属性存有处理服务器响应的函数。...3. resp 可以通过 responseText 属性来取回由服务器返回的数据。...从 0 到 4 发生变化。 0: 请求未初始化。 1: 服务器连接已建立。 2: 请求已接收。 3: 请求处理中。...xmlHttp 对象有两个属性都可以获取后台返回的数据,分别是: responseText 和 responseXML ,其中 responseText 是用来 获得 字符串形式 的响应数据
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。...如果服务器通过 XMLHttpRequest 发送 HTML, 文本将存储在 responseText 属性中。不必从 responseText 属性中读取数据。...插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。 优点: 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。...它被存储在 responseText 属性中为了读取存储在 responseText 属性中的 JSON 数据,需要根据 JavaScript 的 eval 语句。...2 使用ajax技术,可以根据用户需求从服务器取数据,当用户点击某个按钮时,才从服务器取数据并显示,灵活。
1、XMLHttpRequest的方法 -abort 停止发送当前请求 -getAllResponseHeaders() 获取服务器返回的全部相应头(字符串形式) -getResponseHeader(...-send(content) 发送请求,其中content是请求参数 -setRequestHeader("label", "value") 发送请求前,设置请求头 2、XMLHttpRequest的属性...-onreadystatechange 指定XMLHttpRequest对象状态改变时的事件处理函数 -readyState XMLHttpRequest对象的处理状态 -responseText 获取服务器的相应文本...对象状态) 0:XMLHttpRequest对象还未初始化 1:开始发送请求 2:请求发送完成 3:开始读取服务器的响应 4:读取服务器响应结束 4.服务器状态码(status属性) 200:服务器响应正常...400:无法找到请求的资源 401:访问资源的权限不够 403:没有权限访问资源 404:需要访问的资源不存在 405:需要访问的资源被禁止 407:访问的资源需要代理身份验证 414:请求的URL太长
原先,XHR对象只在IE中得到支持(因此限制了它的使用) 但是从Mozilla 1.0和Safari 1.2开始,对XHR对象的支持开始普及。...){ //其他浏览器 xmlHttp = new XMLHttprequest(); } } 方法和属性 方法属性 描述 void abort() 停止当前请求 String getAllresponseHeadders...实例化一个字符缓存区对象; String line = null; try { BufferedReader reader = request.getReader();//请求字符缓存输入流,从字符输入流中读取文件...,一次读取一行。...读取响应首部 当服务器对HEAD请求做出响应时,它只发送响应首部忽略响应内容。
然而,在以下情况中,请使用 POST 请求: a)无法使用缓存文件(更新服务器上的文件或数据库) b)向服务器发送大量数据(POST 没有数据量限制) c)发送包含未知字符的用户输入时,POST 比 GET...更稳定也更可靠 4.服务器响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。...属性 描述 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。...readyState 属性存有 XMLHttpRequest 的状态信息。 ?...xhr.responseXML; // var tbody =document.createElement("tbody"); //读取
data) // console.log(xhr.status) // }) 四、xhr.status 1、概念 status是XMLHttpRequest对象的一个属性,表示响应的...详情可以查看这个链接 坑2:XMLHttpRequest提供了timeout的属性,为了防止请求过了很久还没有成功,白白占用的网络资源。...五、readystate 1、概念 XMLHttpRequest 的一个属性,用来表示当前XMLHttpRequest对象处于什么状态 有5个值,mdn的解析 0 初始化,XMLHttpRequest对象还没有完成初始化...(但尚未调用 open() 方法) 1 载入,XMLHttpRequest对象开始发送请求 2 载入完成,XMLHttpRequest对象的请求发送完成 3 下载解析中,XMLHttpRequest对象开始读取服务器的响应...4 完成,XMLHttpRequest对象读取服务器响应结束 2、举个例子 var xhr= new XMLHttpRequest() xhr.open('GET','hello.json',true
浏览器中创建XMLHttpRequest对象的方式为: var xmlHttpRequest = new XMLHttpRequest(); 由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest...然而,发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。...此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。...如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。...,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。...首先,需要先了解XMLHttpRequest这个对象的属性和方法: 属性: 方法: 对这个对象有了静态了了解,知道它长的什么样子,有什么功能了,下边该我们使用它了,当然这里我也用五步法写出代码来...对象创建失败,无法发送数据!")...不给予用户明确的回应,没有恰当的预读数据,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不希望看到的,也是他们无法理解的。...通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
接受并使用从服务器发来的数据。 工作原理 Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。...并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。...Note 2: 如果不设置响应头 Cache-Control: no-cache 浏览器将会把响应缓存下来而且再也不无法重新提交请求。...属性,包含 test.html 文件的内容。...为了在 alertContents() 中使用这个数据,我们可不能只是alert responseText ,我们要解析它并 alertconputedString,我们想要的属性: function
1.建立xmlHttpRequest对象 所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均支持XMLHttpRequest 对象,而IE5 和 IE6 使用 的是...if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); if(xmlHttp.overrideMimeType){ xmlHttp.overrideMimeType...=xmlHttp.responseText; document.getElementById(“info”).innerHTML = responseText; } } readyState属性:表示请求...只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。...status属性:响应的 HTTP 状态码 200:响应成功 301:永久重定向/永久转移 302:临时重定向/临时转移 304:本次获取内容是读取缓存中的数据 400:请求参数错误 401:无权限访问
JavaScript读取响应 JavaScript执行适当的操作(例如页面更新) AJAX - XMLHttpRequest对象 AJAX的核心是XMLHttpRequest对象。...但是,在以下情况下始终使用POST请求: 无法使用缓存文件(更新服务器上的文件或数据库)。 向服务器发送大量数据(POST没有大小限制)。...AJAX - 服务器响应 在AJAX中,通过onreadystatechange属性、readyState属性、status属性和statusText属性来管理XMLHttpRequest对象的状态和服务器响应...onreadystatechange 属性 定义在 readyState 属性更改时要调用的函数。 readyState 属性 保存 XMLHttpRequest 的状态。...responseText 以字符串形式获取响应数据 responseXML 以 XML 数据形式获取响应数据 getAllResponseHeaders() 从服务器资源返回所有标头信息 getResponseHeader
并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。 ?...对象的 responseText 或 responseXML 属性。...AJAX - onreadystatechange 事件 下面是 XMLHttpRequest 对象的三个重要的属性: 属性 描述 onreadystatechange 存储函数(或函数名),每当 readyState...属性改变时,就会调用该函数。...readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
比 GET 更稳定也更可靠 获得来自服务器的响应 如需获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。...responseText 属性 如果来自服务器的响应并非 XML,请使用 responseText 属性。...responseText 属性返回字符串形式的响应,因此您可以这样使用: document.getElementById("myDiv").innerHTML=xmlhttp.responseText;...readyState 属性存有 XMLHttpRequest 的状态信息。...readyState: 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
一个外国比赛记录一下web题目 Flaskmetal Alchemist 在附件里看到有版本号 同时发现flag在Flag里面 在这上面看到like与两个%包裹用户输入的数据,这里无法进行注入,...这个文章给了灵感,服务器端 XSS(动态 PDF),存在一个服务端xss,利用本地文件读取 x=new XMLHttpRequest; x.onload=function(){document.write...x=new XMLHttpRequest; x.onload=function(){ document.write(this.responseText) }; x.open(..."file:///etc/passwd"); x.send(); 执行报错 使用了 wkhtmltoimage,查询得到wkhtmltopdf,在0.12.6版本默认禁止读取本地文件..., 不过还可以利用 XMLHttpRequest 去让服务器访问/admin,然后将访问的内容返回到vps上 x=new XMLHttpRequest(); x.open("GET",
领取专属 10元无门槛券
手把手带您无忧上云