分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

Ajax

发布时间:2023-09-06 02:34责任编辑:林大明关键词:Ajax

 伪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>
iframe

 原生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>
ajax

流程:创建一个XMLHttpRequest对象,设置回调函数,建立连接,(Post请求,要设置请求头) ,发送数据

Ajax

原文地址:https://www.cnblogs.com/yanxiaoge/p/10513904.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved