一.前言
本文将从下面几个方面来了解AJAX的使用方法
- GET和POST请求
- JSON
- AJAX流程
- jQuery中的AJAX
- 处理跨域问题
二.GET和POST请求
想学习AJAX，就必须先了解GET请求和POST请求。
GET与POST的区别
- GET请求的数据会附在URL之后。
- GET请求数据有大小限制，POST不限制大小。
- GET的安全性要比POST的安全性低。
GET请求
这里使用form表单来进行提交
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- 要向服务器发送数据必须使用form表单，使用get方法-->
<form action="get.php" method="get">
<!-- 使用name来传递数据 -->
<input type="text" name="user" />
<!-- 数据提交 -->
<input type="submit" value="发送请求" />
</form>
</body>
</html>
- php代码
<?php
//使用utf8编码格式（如不设置，输入中文时，浏览器将无法正确解析中文）
header('Content-type:text/html;charset=utf8');
// 使用$_GET获取数据
echo "hello $_GET[user]";
?>
POST请求
POST请求与GET请求的用法基本相同
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- 要向服务器发送数据必须使用form表单，使用post方法 -->
<form action="post.php" method="post">
<!-- 使用name来传递数据 -->
<input type="text" name="user" />
<!-- 数据提交 -->
<input type="submit" value="发送请求" />
</form>
</body>
</html>
- php代码
<?php
//使用utf8编码格式（如不设置，输入中文时，浏览器将无法正确解析中文）
header('Content-type:text/html;charset=utf8');
// 使用$_POST获取数据
echo "hello $_POST[user]";
?>
三.JSON
JSON语法规则
- 书写格式
名称 : 值
"user":"yimi" - JSON值与对于的符号
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
- JSON对象
对象中可以包含多个名称和值 ---- {在花括号中写}
{ "user":"yimi" , "password":"123" } - JSON数组
JSON 数组可包含多个对象 ---- [在方括号中书写]
{
"students": [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
]
}
- 通过JS赋值
var students = [
{ "id":"001" , "name":"yimi" },
{ "id":"002" , "name":"shan" }
];
JSON使用
前面做了那么多的铺垫，就是下面的两个方法，这是JSON中很重要的方法，特别是在数据传递的时候，这两个方法经常被使用。
- 将字符串转换成JSON对象
var obj = JSON.parse(jsonstr); - 将JSON对象转换成字符串
var str = JSON.stringify(jsonobj);
四.AJAX流程
AJAX用于实现异步加载
AJAX使用流程及记忆方法
此记忆方法可能不算好，如果觉得不适合你，可以另外重新想一个。
-
new XMLHttpRequest();--- 收到一个新的快递 -
open('Methor',url,true)--- 你迫不及待地打开 -
send();--- 发现你的东西有问题，就给送回去了 -
function onload(){}--- 卖家处理你的快递 -
responseText--- 处理后，再把快递给你返回来
GET请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//创建一个ajax对象
var xhr = new XMLHttpRequest();
//第一个参数：采用post/get形式请求
//第二个参数：选择要连接的网址
//第三个参数：是否发起异步请求，一般为true，也可以不写，默认为true。
xhr = open('GET','ajax.php',true);
//将数据发送给服务器（GET请求一般为null）
xhr = send(null);
//ajax请求成功后的回调
xhr.onload = function(){
//服务器返回的数据,请求之前为空
console.log(xhr.responseText);
}
</script>
</body>
</html>
POST请求
<script type="text/javascript">
//创建一个ajax对象
var xhr = new XMLHttpRequest();
//第一个参数：采用post/get形式请求
//第二个参数：选择要连接的网址
//第三个参数：是否发起异步请求，一般为true，也可以不写，默认为true。
xhr = open('POST','ajax.php',true);
//设置Content-Type,以告知服务器实体中有参数
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//将数据发送给服务器（括号里面为你要传递到服务器的数据）
xhr = send("user="+username);
//ajax请求成功后的回调
xhr.onload = function(){
//服务器返回的数据,请求之前为空
console.log(xhr.responseText);
}
</script>
文件上传
<body>
<!-- 设置 enctype="multipart/form-data" -->
<form id="regForm" enctype="multipart/form-data">
<input type="text" name="user"/><br />
<input type="password" name="pwd"/><br />
<a class="upload">
<input type="file" name="icon"/>
</a>
<input type="button" onclick="reg()" value="立即注册" />
</form>
<script type="text/javascript">
function reg(){
var regForm = document.getElementById('regForm');
var formData = new FormData(regForm);
var reg_api = 'reg.php' ;
var xhr = new XMLHttpRequest();
xhr.open('POST',reg_api,true);
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');不需要设置Content-Type
xhr.send(formData);
xhr.onload = function(){
//json字符串
var jsonStr = xhr.responseText;
//将json字符串转换为json对象
var obj = JSON.parse(jsonStr);
alert(obj.message);
}
}
</script>
</body>
五.jQuery中的AJAX
jQuery中的GET方法
- HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="btn">发送一个ajax请求</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function(event) {
//第一个参数:要链接的网址
//第二个参数：要发送的数据
//第三个参数：回调函数
$.get('jq_get.php',{'user':'yimi'}, function(data) {
$('#box').html(data);
});
});
</script>
</body>
</html>
- php代码
<?php
var_dump($_GET);
?>
- 输出结果
array (size=1)
'user'=>string'yimi'(length=4)
jQuery中的POST方法
- HTML主要代码
<body>
<button id="btn">发送一个ajax请求</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function(event) {
//第一个参数:要链接的网址
//第二个参数：要发送的数据
//第三个参数：回调函数
$.post('jq_post.php', {'user':'yimi','pwd':'123456'}, function(data) {
$('#box').html(data)
});
});
</script>
</body>
- php代码
<?php
var_dump($_POST);
?>
- 输出结果
array (size=2)
'user'=>string'yimi'(length=4)
'pwd'=>string'123456'(length=6)
jQuery中的JAJAX方法
- HTML主要代码
<body>
<button id="btn">发送一个ajax请求</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function(event) {
$.ajax({
url: 'jq_ajax.php',//要链接的地址
type: 'POST',//请求可以是post，也可以是get
dataType: 'html',//返回html数据
data: {'user': 'yimi','pwd':'123456'},//要发送的数据
})
//成功的回调函数
.done(function(data) {
console.log("success");
$('#box').html(data);
})
//失败的回调函数
.fail(function() {
console.log("error");
})
//成功或失败都会执行的函数
.always(function() {
console.log("complete");
});
});
</script>
</body>
- php代码
<?php
var_dump($_POST);
?>
- 输出结果
array (size=2)
'user'=>string'yimi'(length=4)
'pwd'=>string'123456'(length=6)
六.处理跨域问题
利用XHR2的方法来实现跨域处理（ie10以下不支持）
只需在php代码中加入以下代码即可
header("Access-Control-Allow-Origin:*");//*号表示允许所有域访问
header("Access-Control-Allow-Methods:POST,GET");//请求
By : Yimi-shan
