伪Ajax请求:
利用iframe进行伪造请求,利用js给iframe的src属性添加网址,iframe会给这个网址发送静态请求
<!DOCTYPE html><html> ???<head lang="en"> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<div> ???????????<p>请输入要加载的地址:<span id="currentTime"></span></p> ???????????<p> ???????????????<input id="url" type="text" /> ???????????????<input type="button" value="刷新" onclick="LoadPage();"> ???????????</p> ???????</div> ???????<div> ???????????<h3>加载页面位置:</h3> ???????????<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe> ???????</div> ???????<script type="text/javascript"> ???????????function LoadPage(){ ???????????????var targetUrl = ?document.getElementById(‘url‘).value; ???????????????document.getElementById("iframePosition").src = targetUrl; ???????????} ???????</script> ???</body></html>
原生Ajax:
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<script src="jquery.min.js"></script></head><body> ???<h1>XMLHttpRequest - Ajax请求</h1> ???<input type="button" onclick="XmlGetRequest();" value="Get发送请求" /> ???<input type="button" onclick="XmlPostRequest();" value="Post发送请求" /> ???<script type="text/javascript"> ???????function GetXHR(){ ???????????var xhr = null; ???????????if(XMLHttpRequest){ ???????????????xhr = new XMLHttpRequest(); ??//创建对象 ???????????}else{ ???????????????xhr = new ActiveXObject("Microsoft.XMLHTTP"); ???????????} ???????????return xhr; ???????} ???????function XmlGetRequest(){ ???????????var xhr = GetXHR(); ???????????xhr.onreadystatechange = function(){ ???//回调函数 ???????????????if(xhr.readyState == 4){ ???????????????????// 已经接收到全部响应数据,执行以下操作 ???????????????????var data = xhr.responseText; ???????????????????console.log(data,"data"); ???????????????} ???????????}; ???????????// 指定连接方式和地址----文件方式 ???????????xhr.open(‘get‘, "/test/", true); ???????????// 发送请求 ???????????xhr.send(); ???????} ???????function XmlPostRequest(){ ???????????var xhr = GetXHR(); ???????????console.log("POST XHR") ???????????xhr.onreadystatechange = function(){ ???????????????if(xhr.readyState == 4){ ???????????????????// 已经接收到全部响应数据,执行以下操作 ???????????????????var data = xhr.responseText; ???????????????????console.log(data); ???????????????} ???????????}; ???????????// 指定连接方式和地址----文件方式 ???????????xhr.open(‘POST‘, "/test/", true); ???????????// 设置请求头 ???????????xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘); ???????????// 发送请求 ???????????xhr.send(‘n1=1;n2=2;‘); ???????} ???</script></body></html>
流程:创建一个XMLHttpRequest对象,设置回调函数,建立连接,(Post请求,要设置请求头) ,发送数据
Ajax
原文地址:https://www.cnblogs.com/yanxiaoge/p/10513904.html