Web信息安全实践_4.3 Ajax

2021-04-24 05:29

阅读：568

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

标签：src 字符串会话解析 flag eth UNC mac size

Ajax的特性：

局部更新。仅仅更新数据。

不会页面跳转
不需要iframe

异步更新，在请求受阻，其他部分的代码可以继续执行。
接收回复并处理。

Ajax的使用特点：

第一，生成XMLHTTPRequest对象；

第二，发出请求；

第三，处理请求返回的结果

"myDiv">Let AJAX change this text

XHR 对象

XMLHttpRequest是AJAX 的基础
所有现代浏览器均支持XMLHttpRequest对象

IE5和IE6使用ActiveXObject

XMLHttpRequest用于在后台与服务器交换数据：这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

（1）浏览器中的对象构造函数

req = new XMLHttpRequest();

（2）在 IE5 和 IE6

req = new ActiveXObject("Microsoft.XMLHTTP");
req = new ActiveXObject("Msxml2.XMLHTTP");

XHR 对象方法

方法	描述
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])	设置目的 URL 、方法、同 / 异步以及其他可选参数
getAllResponseHeaders()	获得返回头部中的所有信息
getResponseHeader("headerLabel")	获得返回头部信息中的特定内容
send(content)	发送该请求（携带参数）
setRequestHeader("label", "value")	设置请求头部中的值

XHR 的 open() 函数

open("method", "URL", asyncFlag);

method：请求的类型； GET 或 POST
url：文件在服务器上的位置
async： true （异步）或 false （同步）

GET 方法和 POST 方法

GET 使用缓存； POST 不使用
向服务器发送大量数据（ POST 没有大小限制；GET放在URL中，有大小限制）
GET 通过 URL 发送用户输入； POST中将参数存放于数据报文中

"myDiv">Let AJAX change this text

xmlhttp.open("GET","1.txt",true);

如果希望传递参数。那么，使用GET方式，直接在URL中把参数的值加上就行了；
如果使用POST方式，相当于是使用表单传递数据，需要额外地设置HTTP头。然后把参数通过send方法传递出去。

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

send(content)

send 类似于点击表单上的提交按钮
参数发送

如果正在使用 GET ，值附加到 open 方法中的 URL
POST 发送需要填写以 & 间隔的键值对

发送参数必须手动添加头部

setRequestHeader("Content-type","application/x-www-form-urlencoded");

XHR 对象属性

属性	描述
onreadystatechange	连接会话的每次状态变化都会触发该属性状态：打开请求、准备发送、发送成功、返回
readyState	连接的状态（ 0~4 ）状态4：收到回复
responseText	服务器返回的应答内容
status	服务器返回的页面状态，如 404 “Not Found” 或者是 200 "OK"
statusText	描述状态的文字

onreadystatechange

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState：连接的状态（ 0~4 ）

存有XMLHTTPRequest的状态，从0到4发生变化

?0 - 请求未初始化

创建对 Object 的新引用时的初始值

?1 - 服务器连接已建立

已成功调用 open()方法

?2 - 请求已发送

请求发出，但尚未收到任何数据

?3- 请求处理中

已收到所有 HTTP 标头
在接收邮件正文之前设置的值

?4- 请求已完成，且响应已就绪

数据传输已完成
我们现在可以使用数据了！

if (xhr.readyState == 4) {
    alert(xhr.readyState+"\n Loaded, Ready to 
    display!");
    if(xhr.status==200) {
        alert("really ready!");
        document.getElementById("symbol").innerHTML = xhr.responseText;
    }
}

else if (xhr.readyState == 3)
    alert(xhr.readyState+"\n receiving...");

else if (xhr.readyState == 2)
    alert(xhr.readyState+"\n sent request!");

else if (xhr.readyState == 1)
    alert(xhr.readyState+"\n open() opened!");

else if (xhr.readyState == 0)
    alert(xhr.readyState+"\n Uninitialized!");

state

在接收到返回结果，也即readyState为4的情况下，state的情况：

function handler() {
 // only handle loaded requests
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
        alert(xhr.status + "\nPage Ready!");
        document.getElementById(‘symbol‘).innerHTML = xhr.responseText;
           }
    else if (xhr.status == 404)
        alert(xhr.status+"\nPage not found!");
    else if (xhr.status == 403)
        alert(xhr.status+"\nAccess Denied!");
    }
}

responseText 服务器返回的应答内容

如果来自服务器的响应并非XML，请使用responseText属性
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性

Status 服务器返回的页面状态

200 OK
403 Forbidden
404 Not Found

if (xhr.status == 200)
{
    alert(xhr.status + "\nPage Ready!");
    document.getElementById(‘symbol‘).innerHTML = xhr.resp onseText;
}

else if (xhr.status == 404)
    alert(xhr.status+"\nPage not found!");

else if (xhr.status == 403)
    alert(xhr.status+"\nAccess Denied!");

同步与异步 async

同步需要等待请求返回
异步无需等待返回

"w3.gif" onload="loadXMLDoc();alert(1);" />
"w3.gif" />

xmlhttp.open("POST","1.php",false); //loadXMLDoc()加载的文件
Sleep(10); //返回文件之前等待10s



"myDiv">Let AJAX change this text

    "w3.gif" onload="loadXMLDoc();alert(1);" />


php
sleep(10);
?>

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

使用 async=false 时，请不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Web信息安全实践_4.3 Ajax

标签：src 字符串会话解析 flag eth UNC mac size

原文地址：https://www.cnblogs.com/tianjiazhen/p/12235894.html

上一篇：《ASP.NET Core 高性能系列》关于性能的闲聊

下一篇：Web自动化测试项目（二）BasePage实现

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Web信息安全实践_4.3 Ajax
文章链接：http://soscw.com/index.php/essay/78813.html

亲，登录后才可以留言！

Web信息安全实践_4.3 Ajax

Let AJAX change this text

XHR 对象

XHR 对象方法

XHR 的 open() 函数

GET 方法和 POST 方法

Let AJAX change this text

send(content)

XHR 对象属性

onreadystatechange

readyState：连接的状态（ 0~4 ）

state

responseText 服务器返回的应答内容

Status 服务器返回的页面状态

同步与异步 async

Let AJAX change this text

评论

热门文章

推荐文章

最新文章

置顶文章