XmlHttpRequest.html

最新推荐文章于 2024-01-12 09:50:02 发布
最新推荐文章于 2024-01-12 09:50:02 发布
阅读量241 收藏
点赞数
分类专栏： web前端 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 16px;
	line-height:1.0;
}
</style>	
</head>

<body>

<h1>员工查询</h1>

<label>请输入员工编号：</label>
<input type="text" id="keyword" /></br>
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

<script>
document.getElementById("search").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
	request.send();
	request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				document.getElementById("searchResult").innerHTML = request.responseText;
			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}
}

document.getElementById("save").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("POST", "server.php");
	var data = "name=" + document.getElementById("staffName").value 
	                  + "&number=" + document.getElementById("staffNumber").value 
	                  + "&sex=" + document.getElementById("staffSex").value 
	                  + "&job=" + document.getElementById("staffJob").value;
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send(data);
	request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				document.getElementById("createResult").innerHTML = request.responseText;
			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}
}
</script>
</body>
</html>

<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
		array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
		array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
	);

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
	create();
}

//通过员工编号搜索员工
function search(){
	//检查是否有员工编号的参数
	//isset检测变量是否设置；empty判断值为否为空
	//超全局变量 $_GET 和 $_POST 用于收集表单数据
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo "参数错误";
		return;
	}
	//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
	//global 关键词用于访问函数内的全局变量
	global $staff;
	//获取number参数
	$number = $_GET["number"];
	$result = "没有找到员工。";
	
	//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . 
			                  "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];
			break;
		}
	}
    echo $result;
}

//创建员工
function create(){
	//判断信息是否填写完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo "参数错误，员工信息填写不全";
		return;
	}
	//TODO: 获取POST表单数据并保存到数据库
	
	//提示保存成功
	echo "员工：" . $_POST["name"] . " 信息保存成功！";
}

json数据格式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>	
</head>

<body>

<h1>员工查询</h1>

<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

<script>
document.getElementById("search").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);
	request.send();
	request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				var data = JSON.parse(request.responseText);
				if (data.success) { 
					document.getElementById("searchResult").innerHTML = data.msg;
				} else {
					document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;
				}
			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}
}

document.getElementById("save").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("POST", "serverjson.php");
	var data = "name=" + document.getElementById("staffName").value 
	                  + "&number=" + document.getElementById("staffNumber").value 
	                  + "&sex=" + document.getElementById("staffSex").value 
	                  + "&job=" + document.getElementById("staffJob").value;
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send(data);
	request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				var data = JSON.parse(request.responseText);
				if (data.success) { 
					document.getElementById("createResult").innerHTML = data.msg;
				} else {
					document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;
				}
			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}
}
</script>
</body>
</html>

<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
		array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
		array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
	);

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
	create();
}

//通过员工编号搜索员工
function search(){
	//检查是否有员工编号的参数
	//isset检测变量是否设置；empty判断值为否为空
	//超全局变量 $_GET 和 $_POST 用于收集表单数据
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo '{"success":false,"msg":"参数错误"}';
		return;
	}
	//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
	//global 关键词用于访问函数内的全局变量
	global $staff;
	//获取number参数
	$number = $_GET["number"];
	$result = '{"success":false,"msg":"没有找到员工。"}';
	
	//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . 
							'，员工姓名：' . $value["name"] . 
							'，员工性别：' . $value["sex"] . 
							'，员工职位：' . $value["job"] . '"}';
			break;
		}
	}
    echo $result;
}

//创建员工
function create(){
	//判断信息是否填写完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
		return;
	}
	//TODO: 获取POST表单数据并保存到数据库
	
	//提示保存成功
	echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';
}

?>

jquery实现XHR

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>	
</head>

<body>

<h1>员工查询</h1>

<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(){ 
	$("#search").click(function(){ 
		$.ajax({ 
		    type: "GET", 	
			url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
			dataType: "json",
			success: function(data) {
				if (data.success) { 
					$("#searchResult").html(data.msg);
				} else {
					$("#searchResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		});
	});
	
	$("#save").click(function(){ 
		$.ajax({ 
		    type: "POST", 	
			url: "serverjson.php",
			data: {
				name: $("#staffName").val(), 
				number: $("#staffNumber").val(), 
				sex: $("#staffSex").val(), 
				job: $("#staffJob").val()
			},
			dataType: "json",
			success: function(data){
				if (data.success) { 
					$("#createResult").html(data.msg);
				} else {
					$("#createResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		});
	});
});
</script>
</body>
</html>
参考：https://www.imooc.com/learn/250
JackLiu16
关注
专栏目录
使用XMLHttpRequest对象读取HTML文件，并输出读取结果
苏木的小站
10-22 5118
使用XMLHttpRequest对象读取HTML文件，并输出读取结果 文章目录使用XMLHttpRequest对象读取HTML文件，并输出读取结果一、运行环境二、代码三、运行效果 一、运行环境 phpStudy 下载 将下面的代码放在网页根目录下 通过127.0.0.1:index.html或者localhost:index.html访问 查看网站根目录方法，如下图： 二、代码 index...
html5 xmlhttprequest,HTML5 XMLHttpRequest使用
weixin_30099989的博客
06-24 667
XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。XMLHttpRequest对象的常用属性：onreadystatechange：指定当readyState属性值改变时的事件处理句柄(只写)；readyState：返回当前请求的状态(只读)；responseText：将相应信...
XMLHttpRequest对象读取HTML文件
实践求真知
11-22 2349
一 代码 index.php 通过XMLHttpRequest对象读取HTML文件，并且输出读取结果 var xmlHttp; //定义XMLHttpRequest对象 function createXmlHttpRequestObject(){ //如果在internet Explorer下运行 if(window.ActiveXObject){
HTML-XMLHttpRequest
u011927449的博客
06-18 219
var xhr = null; if(window.XMLHttpRequest){ xhr= new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(method,url,true);//true为异步，false为同步 xhr.onreadystatechange=function(){ if (xhr.readystate == 4){ if(.
纯html通过XMLHttpRequest访问java后端接口并将返回结果输出到控制台【建议收藏】
小魏快起床的博客
01-12 908
1、后端接口【servlet+tomcat】2、前端页面代码3、js发起请求部分。
AJAX(XMLHttpRequest.status)状态码
10-27
10. dataType：预期服务器返回的数据类型，例如"xml"、"html"、"json"、"jsonp"等。 11. error：请求失败时调用的回调函数，有三个参数：XMLHttpRequest对象、错误信息、可能的错误对象。 12. global：是否触发全局...
原生html如何发送网络请求,原生JS发送HTTP请求的方式：XMLHttpRequest.send()
weixin_39805119的博客
06-03 1991
在前端开发过程中，就目前来看，发送HTTP请求，大家习惯在框架里去应用，比如vue,react等。我们在往前追朔下，用的最多的是jQuery里的ajax。但是最原始的发送HTTP请求方式是什么呢？一起了解下~~其实就是XMLHttpRequest.send()。说明XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求)，则此方法会在请求发送后立即...
XMLhttpRequest.js上传
02-13
首先，我们需要创建一个HTML元素，例如一个`<div>`，作为拖放区域。我们可以为这个元素添加`draggable="true"`属性，并监听`dragenter`、`dragleave`和`drop`事件。`dragenter`事件会在鼠标进入拖放区域时触发，`...
Ajax-mock-xmlhttprequest.zip
09-17
Ajax-mock-xmlhttprequest.zip,xmlhttprequest模拟测试,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况...
window.XMLHttpRequest详解（AJAX工作原理）1
05-05
这意味着，当一个`XMLHttpRequest`对象发起请求后，可以立即将控制权交还给调用者，而浏览器会继续执行后续的HTML或JavaScript代码。一旦服务器响应到达，可以通过事件处理器来处理这些响应，从而使网页动态地更新...
关于XMLHttpRequest对象的responseText属性
姚建友的专栏
07-31 8229
  下面的代码是利用Ajax实现在输入框中写入一个ID号，即时的从数据库中取得数据并在页面无刷新的情况下显示。Ajax.aspx的代码：@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax.aspx.cs" Inherits="Activity_Ajax" %>DOCTYPE html PUBLIC "-//W3C//
XMLHttpRequest
汤庆
02-10 3857
一、简介         Ajax (Asynchronous Javascript And Xml )是指一种创建交互式网页应用的网页开发技术，其中，Ajax的核心是JavaScript对象XMLHttpRequest(以下简称XHR)，XHR是一种支持异步请求数据的技术。      我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。ajax是...
html5+ XMLHttpRequest 与mui ajax用法
于浦洋 的博客
03-13 5295
Javascript XMLHttpRequest网络请求 XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。
HTML5 XMLHttpRequest使用
joshua
01-19 1799
XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。 XMLHttpRequest对象的常用属性：        onreadystatechange：指定当readyState属性值改变时的事件处理句柄(只写)；       readyState：返回当前请求的状态(
html 网络请求方法,HTML5+ - 使用XMLHttpRequest模块管理网络请求
weixin_34184444的博客
06-04 1062
XMLHttpRequest模块管理网络请求，与标准HTML中的XMLHttpRequest用途一致，差别在于前者可以进行跨域访问。通过plus.net可获取网络请求管理对象。1、获取跨域网络请求对象XMLHttpRequest(): 创建一个XMLHttpRequest 对象，对象创建时不触发任何时间和网络请求，需和open，send方法配合使用。var xhr = new plus.net.X...
微信二维码支付
茶碗儿
02-02 4731
一、创建微服务 1、导入依赖 <!--微信支付--> <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>0.0.3</version> </dependency> <!--httpclient支持--> <depend
xmlHttpRequest.open('GET','D:\Microsoft VS Code\HTML\黑马\json数据.json');怎么将本地的json数据输出到div表签中
最新发布
09-27
要在JavaScript中使用`XMLHttpRequest`从本地JSON文件获取数据，并将其显示在HTML的`<div>`元素中，你需要按照以下步骤操作： 1. 首先，确保你的JSON文件（如`json数据.json`）位于指定路径，并且格式正确。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值