【你的好运气藏在你的实力里，也藏在你不为人知的努力里】
所以，在搬砖的路上越走越远。。。。。
一、Ajax语法
-
ajax创建(一般)步骤
a. 创建ajax对象(存在兼容问题)var xhr = new XMLHttpRequest();b. 调用open 方法
xhr.open("get","1.txt",true); /* 第一个参数：请求方式 get post 第二个参数：url 第三个参数：是否异步 true 异步 false 同步 */c. 调用send()
xhr.send();d. 等待数据响应
xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error: " + xhr.status); } } } -
ajax兼容处理
a. 兼容写法一var xhr = null; try{ xhr = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5 }b. 兼容写法二
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } -
ajax完整创建代码
var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("get","2.txt",true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //判断本次下载的状态码，前提是xhr.onreadyStste必须未4 alert(xhr.responseText); }else{ alert("Error: " + xhr.status); } } }
二、form表单的get和post请求
-
form表单的get/post请求
a. action: 点击submit以后跳转到对应的url
b. method: 表单提交数据的方式
(1). get(默认)
eg. http://localhost/ajax/1.get.php?username=gyf&password=123456&age=18
提交方式：是直接将数据拼接在url后面进行提交，通过?进行拼接
优点：简单
缺点：不安全，有大小限制，最大2kb,没办法实现上传
(2). post
eg. eg.http://localhost/ajax/1.post.php
提交方式：通过浏览器内部进行提交
优点：安全，理论上没有上限，可以实现上传
缺点：比get复杂
【注】post请求时，要在form标签内加enctype=“application/x-www-form-urlencoded”，enctype表示数据提交的格式。 -
案例（所有页面均在同一目录下）
a. 1.get.php页面<?php header('content-type:text/html;charset="utf-8"'); /** * $_GET（全局的关联数组） 用来存放通过get提交过来的数据 */ $username = $_GET['username']; $password = $_GET['password']; $age = $_GET['age']; //获取？后面对应键的值 echo "你的用户名：{$username}, 密码是：{$password}, 年龄是：{$age}" ; ?>b. 1.post.php页面
<?php header('content-type:text/html;charset="utf-8"'); /** * $_POST（全局的关联数组） 用来存放通过post提交过来的数据 */ $username = $_POST['username']; $password = $_POST['password']; $age = $_POST['age']; //获取？后面对应键的值 echo "你的用户名：{$username}, 密码是：{$password}, 年龄是：{$age}" ; ?>c. form表单.html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>form表单的get/post请求</title> </head> <body> <!-- get提交 --> <!-- <form action="1.get.php" method="get"> <input type="text" name="username" id="" placeholder="用户名"> <input type="password" name="password" id="" placeholder="密码"> <input type="text" name="age" id="" placeholder="年龄"> <input type="submit" value="提交"> </form> --> <!-- post提交 --> <form action="1.post.php" method="post" enctype="application/x-www-form-urlencoded"> <input type="text" name="username" id="" placeholder="用户名"> <input type="password" name="password" id="" placeholder="密码"> <input type="text" name="age" id="" placeholder="年龄"> <input type="submit" value="提交"> </form> </body> </html>运行结果：
a. get方式提交
b. post方式提交
三、Ajax的get和post请求
-
ajax的get请求
xhr.open("get","1.get.php?username=gyf&password=123&age=23",true); //ajax的get请求，直接在open方法里面拼接字符串 -
ajax的post请求
//ajax的post请求 xhr.open("post","1.post.php",true); //必须在send方法之前去设置请求的格式 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //send方法传入查询字符串（post请求提交的数据，需要通过send方法进行提交） xhr.send("username=gyf&password=221800&age=21"); -
ajax函数的封装
ajax.js
/*
method
url
data
success:数据下载成功以后执行的函数
error:数据下载失败执行的函数
*/
function $ajax({method = "get", url, data, success, error}){ //这里使用es6的解构，设置method默认为get
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断如果数据存在
if(data){
data = querystring(data);
}
if(method == "get" && data){
url += "?" + data;
}
xhr.open(method, url, true);
if(method == "get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
/*【🐖】
如何去处理拿到的数据,不确定
回调函数：即将一段代码当作参数传到某一个函数里面，在合适的地方调用
*/
if(success){ //判断是否传入success
success(xhr.responseText);
}
}else{
if(error){ //判断是否传入error
error("Error: " + xhr.status);
}
}
}
}
}
//querystring封装(将传入的data对象封装成查询字符串)
function querystring(obj){
var str = "";
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length-1); //使用substring去除“name=gyf&password=123456&age=20&”末尾的&符号
}
-
ajax封装的使用
目录结构:
09.ajax.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax的封装和使用</title>
<script src="./js/ajax.js"></script> <!-- 引入封装好的ajax.js -->
<script>
window.onload = function(){
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
//GET请求
oBtn1.onclick = function(){
$ajax({
//上面设置过method默认为get,所以这里method:"get"可以不传入
data:{ //此处data传入对象
username:"gyf",
password:"123456",
age:"30"
},
url:"1.get.php", //当前目录下的1.get.php页面
success:function(result){
alert("这是GET请求：" + result);
},
error:function(msg){
alert(msg);
}
})
}
//POST请求
oBtn2.onclick = function(){
$ajax({
url:"1.post.php",
data:{ //此处data传入对象
username:"gyf",
password:"123456",
age:"18"
},
method:"post",
success:function(result){
alert("这是POST请求：" + result);
},
error:function(msg){
alert(msg);
}
})
}
}
</script>
</head>
<body>
<button id="btn1">GET请求</button>
<button id="btn2">POST请求</button>
</body>
</html>
运行结果：
a. 点击“GET请求”按钮
b. 点击“POST请求”按钮
写在最后：如有错误，欢迎指正
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
