什么是AJAX呢
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX不是新的语言，可以在js运行，新方法。
异步同步？
在现实中同步是两个人跑步齐头并进，异步是一快一慢。
但在js里
异步是指两个分开处理，同步是指两个一个跟一个逐条处理。
多进程同时处理也就是异步处理的时候可以调高程序效率
声明AJAX
有顺序的，
先打开浏览器，然后确定数据的传输方式
然后在地址栏输入内容，发送后等待反馈。
//1、打开浏览器
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//1、声明一个ajax对象
//1、打开浏览器
var xhr = new XMLHttpRequest();
//2、地址栏输入内容
xhr.open("get", "1.txt", true);
//三个参数分别是
//1、数据传输方式 get post
//2、url
//3、是否异步
//3、发送
xhr.send();
//4、等待页面响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);//输出响应数据（字符串）
}
}
}
}
AJAX浏览器兼容
那么接着上面的代码
在浏览器环节出现了兼容性问题
还是IE6
其他代码没变
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//1、打开浏览器
var xhr = null;
//兼容代码
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、地址栏输入内容
xhr.open("get", "1.txt", true);
//3、发送
xhr.send();
//4、等待页面响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);//输出响应数据（字符串）
}
}
}
}
这代码中出现了新的语句，看下面：
try…throw…catch补救代码
在浏览器兼容里
我们用到了一个新的语法
在这里比if else好用
格式：
try{
throw new Error("错误信息");
}catch(error){
补救; error错误对象。
}
throw 手动抛出异常的。
try{
alert("异常前");
throw new Error("这是演戏，别紧张");
alert("异常后");
}catch(error){
alert("补救代码：" + error);
}
AJAX的onreadystatechange事件
第四部的等待页面响应
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
onreadystatechange的值
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
get / post （获取方式）
我们这里做数据库是在html里形成表单
所以下面是html代码
<form action="code/1.get.php" method="get">
<input type="text" name = 'username' placeholder="用户名" />
<input type="text" name = 'age' placeholder="年龄" />
<input type="text" name = 'password' placeholder="密码" />
<input type="submit">
</form>
这段代码简单明了，关于form的action属性，我们细说。
action
这里面写链接，当我们点击submit按钮上的时候，我们就会跳转到这个url。
method
method 属性规定如何发送表单数据，默认是get。
get（url传输）查询字符串
直接将要传输的数据，通过?search方式，进行传输
缺点：
1、不安全
2、最大上限2kb
post （浏览器内部传输）表单数据
提交数据的时候设置参数 enctype = "application/x-www-form-urlencoded"
通过浏览器内部进行传输
优点：
1、安全
2、没有最大上限
3、上传
AJAX的get和post
不废话，直接上代码。
Btn0是get
Btn1是post
get
aBtns[0].onclick = function(){
var xhr = null;
try{
xhr = new XMLHttpRequ est();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//在ajax传输数据的时候，我们需要手动将search拼接url的后面
//1、url中中文编码问题
// encodeURI(字符串)
//2、自动缓存，两次请求url一样
// 最后面拼接当前时间时间戳
xhr.open("get", "code/1.get.php?username=" + encodeURI("钢铁侠") + "&age=18&password=123456&" + new Date().getTime(), true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
post
aBtns[1].onclick = function(){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", "code/1.post.php", true);
//在调用send方法之前，也必须设置请求头的参数
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//ajax的post请求数据通过send方法进行传输
xhr.send("username=钢铁侠&age=18&password=123456")
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
完整版的AJAX封装-回调函数版本
先找到所有不确定的值。
下面代码可以直接粘了运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function ajax({method = "get", url, data, success, error}){
//1、声明一个ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、open
if(method.toLowerCase() == "get" && data){
url += "?" + data + "&" + new Date().getTime();
}
xhr.open(method, url, true);
//3、send
if(method.toLowerCase() == 'post'){
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}else{
xhr.send();
}
//4、等待响应数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
/*
在这里如何处理下载到的数据是不确定，
回调函数，原理，我们将在这里执行的代码的编写权利交给别人。
*/
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
aBtns[0].onclick = function(){
ajax({
url: "code/1.get.php",
data: "username=钢铁侠&age=18&password=123456",
success: function(data){
alert("GET请求下载的数据：" + data);
},
error: function(msg){
alert(msg);
}
})
}
aBtns[1].onclick = function(){
ajax({
method: 'post',
url: "code/1.post.php",
data: "username=钢铁侠&age=18&password=123456",
success: function(data){
alert("POST请求下载的数据：" + data);
},
error: function(msg){
alert(msg);
}
})
}
}
</script>
</head>
<body>
<button>GET请求</button>
<button>POST请求</button>
</body>
</html>
这个是代码中出现的get和post的引用代码
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_GET['username'];
$age = $_GET['age'];
$password = $_GET["password"];
echo "xxxxyyyttt你的名字：{$username}，年龄：{$age}，密码：{$password}";
?>
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_POST['username'];
$age = $_POST['age'];
$password = $_POST["password"];
echo "你的名字：{$username}，年龄：{$age}, 密码：{$password}xxxx";
?>
其中
**error_reporting(0);**这段代码就是从报错弹出的
就是我们见过的404什么的，具体数字代表什么意思大家可百度。
$_GET 一个全局关联数组 这个数组会结构通过get请求传输过来的数据 以关联数据的形式存在呢
$_POST全局数组 存储过来的post发送过来的数组
请求json格式的字符串
也就是通过AJAX下载数据、
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
ajax({
method: "get",
url: "code/getList.php",
success: function(data){
var obj = JSON.parse(data);
alert(obj.username);
},
error: function(msg){
alert(msg);
}
})
}
}
3628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
