ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Web信息安全实践_4.3 Ajax

2020-01-27 14:01:22  阅读：218  来源： 互联网

标签：status Web readyState xmlhttp 4.3 alert xhr Ajax open


Ajax的特性：
  • 局部更新。仅仅更新数据。
    • 不会页面跳转
    • 不需要iframe
  • 异步更新，在请求受阻，其他部分的代码可以继续执行。
  • 接收回复并处理。
Ajax的使用特点：第一，生成XMLHTTPRequest对象；第二，发出请求；第三，处理请求返回的结果
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(URL) { // 使用Ajax获取内容之后，在原始页面进行更新
    if (window.XMLHttpRequest) { /* code for IE7+, Firefox, Chrome, Opera, Safari */    
      xmlhttp=new XMLHttpRequest(); // 1.生成XMLHttpRequest对象
    }
    else { // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }    
    
    xmlhttp.onreadystatechange=function() {    
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {                          
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText; /* responseText属性返回字符串形式的响应*/          
      }
    }
    
    /* 2.将请求发送到服务器。使用 XMLHttpRequest 对象的 open() 和 send() 方法。 */
    xmlhttp.open("GET",URL,true); /* open(method,url,async) */        
    xmlhttp.send();    
}

function loadXML(URL) { // 使用原生的JS来获一个文件内容
    document.location = URL;
}
</script>
</head>

<body>
    <div id="myDiv"><h3>Let AJAX change this text</h3></div>
    <button type="button" onclick="loadXML('test.txt')">Change Content with raw JS</button> <!--使用原生的JS来获一个文件内容-->
    <br>
    <button type="button" onclick="loadXMLDoc('test.txt')">Change Content with Ajax</button> <!--使用Ajax获取内容之后，在原始页面进行更新-->
</body>
x
 12345678910111213141516171819202122232425262728293031323334

XHR 对象

  • XMLHttpRequest是AJAX 的基础
  • 所有现代浏览器均支持XMLHttpRequest对象
    • IE5和IE6使用ActiveXObject
  • XMLHttpRequest用于在后台与服务器交换数据：这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
（1）浏览器中的对象构造函数
req = new XMLHttpRequest();
1 1（2）在 IE5 和 IE6
req = new ActiveXObject("Microsoft.XMLHTTP");
req = new ActiveXObject("Msxml2.XMLHTTP");
2 12

XHR 对象方法

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

XHR 的 open() 函数

open("method", "URL", asyncFlag);
1 1
  • method：请求的类型； GET 或 POST
  • url：文件在服务器上的位置
  • async： true （异步）或 false （同步）

GET 方法和 POST 方法

  •  GET 使用缓存； POST 不使用
  • 向服务器发送大量数据（ POST 没有大小限制；GET放在URL中，有大小限制）
  • GET 通过 URL 发送用户输入； POST中将参数存放于数据报文中
<html>
<head>
<script type="text/javascript">
function loadXMLDoc() {
	var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {     
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;            
        }
    }
    xmlhttp.open("GET","1.txt",true); // xmlhttp.open(“POST","1.txt",true);
    xmlhttp.send();
}   
</script>
</head>
    
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content with Ajax</button>
</body>

<html>
28 12345678910111213141516171819202122232425262728
xmlhttp.open("GET","1.txt",true);
1 1
  • 如果希望传递参数。那么，使用GET方式，直接在URL中把参数的值加上就行了；
  • 如果使用POST方式，相当于是使用表单传递数据，需要额外地设置HTTP头。然后把参数通过send方法传递出去。
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
2 12

send(content)

  • send 类似于点击表单上的提交按钮
  • 参数发送
    • 如果正在使用 GET ，值附加到 open 方法中的 URL
    • POST 发送需要填写以 & 间隔的键值对
  • 发送参数必须手动添加头部
setRequestHeader("Content-type","application/x-www-form-urlencoded");
1 1

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!");
20 1234567891011121314151617181920

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!");
    }
}
13 12345678910111213

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!");
11 1234567891011

同步与异步 async

标签：status,Web,readyState,xmlhttp,4.3,alert,xhr,Ajax,open
来源： https://www.cnblogs.com/tianjiazhen/p/12235894.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有