使用ajax加上get和post方法，通过后台加载数据，并在网页上进行显示
【摘要】 Ajax 使用ajax加上get和post方法，通过后台加载数据，并在网页上进行显示
学习Ajax之前必须有html，CSS，JS，jQuery(了解)的相关知识。
1.什么是Ajax？
Ajax在前端主要的功能是获取服务器的数据。
经常使用Ajax来进行异步加载，也就是不影响整个窗口的前提下，进行页面部分的加载改变。
Ajax异步!!!，Ajax的全称自然就是：Asynchronous(异步) JavaScript And XML
2.Ajax的使用 Get方法
在学习php基础语法时候，我们通过跳转到一个新的页面来实现，就像php语法的第7节一样。下面我们使用Ajax来，直接请求服务器发送数据，不需要跳转一个新的页面。
在元素JS中来实现Ajax主要的类就是XMLHttpRequest，它的使用一般有四个步骤：
1.创建XMLHttpRequest对象
2.准备发送网络请求
3.开始发送网络请求
4.指定回调函数
这里使用ajax，能够识别用户名是否已存在的例子：
<?php
$username = $_GET["username"];
//这里应该查询数据库，这里只是一个模拟数据库
if($username == 'zhangsan'){
echo "username exists";
}else{
echo "username OK";
}
?>
再在wamp中，创建一个register.html，来作为前端访问的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var username = document.getElementById("username").value;
//使用JS代码进行checkUsername.php这个文件的访问，将Username传递给这个文件
//从这开始就使用ajax来操作了。
//<!--第一步：创建XMLHttpRequest对象-->
var xhr = new XMLHttpRequest();
//<!--第二步：准备发送-->
//这里的open方法有三个参数。
//第一个参数，使用的什么方法。
//第二个参数url，这里因为是get请求，所以url后面是要跟上参数的！！！
//第三个参数，同步还是异步，true异步，false同步
xhr.open("get","checkUsername.php?username="+username,true);
//<!--第三步：执行发送-->
xhr.send(null);
//<!--第四步：指定回调函数-->
xhr.onreadystatechange = function(){
//responseText返回的是字符串
var result = xhr.responseText;
console.log(result);
document.getElementById("result").innerText = result;
};
};
};
</script>
</head>
<body>
<h1>注册界面</h1>
<form action="register.php" method="get">
用户名：<input type="text" name="username" id="username">
<input type="button" value="验证用户名" id="btn">
<span id="result"></span>
<br>
密码：<input type="password" name="password">
<input type="submit" name="" value="提交">
</form>
</body>
</html>
3.Ajax的使用 Post方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var username = document.getElementById("username").value;
//使用JS代码进行checkUsername.php这个文件的访问，将Username传递给这个文件
//从这开始就使用ajax来操作了。
//<!--第一步：创建XMLHttpRequest对象-->
var xhr = null
//由于IE6以下的版本是没有XMLhttpRequest这个对象的，所以做一个兼容性判断。
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
//IE6以下版本，都是使用ActiveXObject
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//<!--第二步：准备发送-->
//这里的open方法有三个参数。
//第一个参数，使用的什么方法。
//第二个参数url，这里因为是get请求，所以url后面是要跟上参数的！！！
//第三个参数，同步还是异步，true同步，false异步,默认异步
// xhr.open("get","checkUsername.php?username="+username,true);
xhr.open("post","checkUsername.php",true);
//<!--第三步：执行发送-->
//对于post请求，参数应该放到请求体当中
var param = "username=" + username
//设置xhr请求头信息，这个步骤仅仅是针对于post请求才有的！！！
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(param);
//<!--第四步：指定回调函数-->
xhr.onreadystatechange = function(){
//readyState等于4代表的是xhr的完成相应
if(xhr.readyState == 4){
//status等于200，代表正常
if(xhr.status == 200){
//除了responseText还有xhr.responseXML,就是不同的格式。
var result = xhr.responseText;
console.log(result);
document.getElementById("result").innerText = result;
}
}
};
};
};
</script>
</head>
<body>
<h1>注册界面</h1>
<form action="register.php" method="post">
用户名：<input type="text" name="username" id="username">
<input type="button" value="验证用户名" id="btn">
<span id="result"></span>
<br>
密码：<input type="password" name="password">
<input type="submit" name="" value="提交">
</form>
</body>
</html>
上面就是完成了一个用户名，电话，电子邮箱的一个唯一性检验
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）