1 初识ajax
Ajax 的本质:无刷新,让js能够主动发送http请求,
(使用客户端通过http请求向服务器发送请求)
客户端语言:
是能够在用户设备上运行的语言,html,css,js,安卓,ios
服务端语言:
是在服务器运行的语言,php,jsp,python
1.2 快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="1.2.php" method="get">
<!--method="get" 表示如果使用这个表单发送http请求,时使用get的方式-->
<input type="text" name="name" value=""><br>
<input type="submit" value="提交">
</form>
</body>
<script>
var input_e = document.getElementsByTagName('input')[0];
input_e.onblur = function () {
var v = this.value;
//创建ajax对象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
xhr.open('get', '1.2.php?name='+v);
xhr.send();
}
</script>
</html>
<?php
echo 1
2 ajax对象
2.1获取对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// W3c 的标准方式
var xhr = new XMLHttpRequest();
console.log(xhr)
</script>
</html>
将创建的对象封装到一个js中(创建公用文件,获取ajax对象)
cxhr.js
function cXHR() {
try{
// W3C标准方式
var xhr = new XMLHttpRequest();
}catch (e) {
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr
}
function gete(id) {
return document.querySelector(id)
}
2.2 ajax 的属性和方法
2.2.1 属性
status:
1系列:在实验环境下使用
2系列:代表请求成功,返回成功,服务器成功的理解了客户端请求的含义。
3系列:客户端请求了服务器,但是服务器并无法处理它需要跳转到哪
4系列:客户端请求的东西不存在,或是你没有权限请求我
5系列:服务器端的错误
StatusText: 时域status一一对应的,如status:200, StatusText:OK
2.2.2 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="cxhr.js"></script>
</head>
<body>
</body>
<script>
var xhr = cXHR()
// alert(xhr)
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}
xhr.open('get', '1.2.php');
xhr.send();
</script>
</html>
2.2.3 同步和异步(由open的第三个参数决定)
同步:一件事一件事的做
异步:多个事情可以同时做
eg:点餐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="cxhr.js"></script>
</head>
<body>
</body>
<script>
function f1() {
var xhr = cXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
alert(xhr.responseText);
}
}
// true 为异步请求,默认;false为同步。
xhr.open('get', '99.php', true);
xhr.send();
}
function f2() {
alert(2)
}
f1();
f2();
</script>
</html>
3 判断用户名是否可用--案例
失去焦点,判断用户名是否可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="" value="" id="name">
<span id="tip"></span><br>
<input type="button" value="注册">
</body>
<script>
//获取文本框
var inp = document.getElementById('name');
//绑定事件
inp.onblur = function () {
var v = this.value;//获取文本内容
//获取ajax对象
var xhr = new XMLHttpRequest();
//监听状态变化事件
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //接收数据完成
//根据服务器返回值修改页面内容
var back_value = xhr.responseText;
if(back_value==1){
// alter('有')
var h = '<font color="red">用户名已被占用</font>'
}else{
// alert('没有')
var h = '<font color="green">恭喜你,用户名可用</font>'
}
document.getElementById('tip').innerHTML = h;
}
}
//设置请求参数
xhr.open('get', '03.php?name='+v);
//发送请求
xhr.send();
}
</script>
</html>
<?php
//获取客户端数据
$name = $_GET['name'];
//链接数据库
mysql_connect('localhost', 'root', '');
//选择数据库
mysql_query('use test');
//设置字符集
mysql_query('set names utf8');
//sql语句
$sql = "'select * from test where name='$name'";
//发送sql语句查询
$res = mysql_query($sql);
$z = mysql_fetch_assoc($res);// 获取查询内容
//var_dump($z)
//为客户端返回数据
if($z){
echo 1;
}else{
echo 0;
}
4 缓存问题
4.1 缓存问题的产生
当使用IE浏览器时,向同一个URL发送多次请求时,会产生缓存问题;
缓存设计的初衷是为了加快网站的响应速度。
4.2 客户端解决缓存问题
改变nrl参数,解决url产生的缓存问题
4.3 在php中设置响应头禁用客户端缓存
case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="" value="" id="name">
<span id="tip"></span><br>
<input type="button" value="注册">
</body>
<script>
//获取文本框
var inp = document.getElementById('name');
//绑定事件
inp.onblur = function () {
var v = this.value;//获取文本内容
//获取ajax对象
var xhr = new XMLHttpRequest();
//监听状态变化事件
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //接收数据完成
//根据服务器返回值修改页面内容
var back_value = xhr.responseText;
if(back_value==1){
// alter('有')
var h = '<font color="red">用户名已被占用</font>'
}else{
// alert('没有')
var h = '<font color="green">恭喜你,用户名可用</font>'
}
document.getElementById('tip').innerHTML = h;
}
}
//设置请求参数
// xhr.open('get', '04.php?name='+v+'&ff='+Math.random());
xhr.open('get', '04.php?name='+v+'&_='+new Date().getTime());
//发送请求
xhr.send();
}
</script>
</html>
<?php
header("Cache-Control: no-cache");
//获取客户端数据
$name = $_GET['name'];
if($name == 'admin'){
echo 1;
}else{
echo 0;
}
5. ajas发送post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="" value="" id="name">
<span id="tip"></span><br>
<input type="button" value="注册">
</body>
<script>
//获取文本框
var inp = document.getElementById('name');
//绑定失去焦点事件
inp.onblur = function () {
var v = this.value;//获取文本内容
//获取ajax对象
var xhr = new XMLHttpRequest();
//监听状态变化事件
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //接收数据完成
//根据服务器返回值修改页面内容
var back_value = xhr.responseText;
if(back_value==1){
// alter('有')
var h = '<font color="red">用户名已被占用</font>'
}else{
// alert('没有')
var h = '<font color="green">恭喜你,用户名可用</font>'
}
document.getElementById('tip').innerHTML = h;
}
}
//设置请求参数
xhr.open('post', '05.php');
//POST 中必须设置请求头
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send('name='+v);
}
</script>
</html>
<?php
header("Cache-Control: no-cache");
//获取客户端数据
$name = $_POST['name'];
if($name == 'admin'){
echo 1;
}else{
echo 0;
}
5.1 Ajax中get和post请求的区别:
(1)传参方式不同
Get在地址尾部使用?拼接,多个参数使用&链接
Post在send方法中传参,多个参数使用&链接
(2)请求头
Post必须设置请求头;
Xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);
Get 不需要设置
(3)参数类型
Get只能传输简单类型: 数字,字符串
Post 除了数字和字符串以外还可以传输二进制数据(比如上传文件,图片,其解析后就是二进制文件)
5.2 Ajax 实现无刷新文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="05.2.php" method="post" enctype="multipart/form-data">
<!--// enctye 相当于设置了请求头-->
<input type="file" name="img" value=""><br>
<input type="submit" value="上传">
<input type="button" value="ajax上传">
</form>
</body>
<script>
var btu = document.getElementById('btu');
btu.onclick = function () {
var xhr = new XMLHttpRequest();
var fd = new FormData(document.getElementsByTagName('form')[0]);// 能够将整个form表单打包
console.log(fd)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.responseText == 1){
alert('上传成功')
}else{
alter('上传失败')
}
}
}
xhr.open('post', '05.2.php');
xhr.send(fd);//使用form作为值发送请求
}
</script>
</html>
<?php
echo move_uploaded_file($_FILES['img']['tmp_name'],'./'.$FILES['img']['name'])?1:0;
//移动文件,将用户上传到网上的文件移动到本地
6. ajax 与xml
6.1 php中生成XML
06.1xml.php
<?php
mysql_connect('localhost', 'root', '');
mysql_query('use test');
mysql_query('set names utf8');
//SQL 语句
$sql = 'select * from test';
$res = mysql_query($sql);
while($row = mysql_fetch_assoc($res)){
$xml .='<admin>';
$xml.= '<id>'.'$row['id'].'</id>';
$xml.= '<name>'.$row['name'],'<name>';
$xml.= '<age>'.$row['age'].'<age>';
$xml .='<admin>'
}
$xml.='</root>';
header('Content-type:text/xml');
echo $xml;
6.2 AJAX获取XML数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="inp" value="获取xml">
</body>
<script>
var inp = document.getElementById('inp');
inp.onclick = function () {
var xhr = new XMLHttpRequest;
if(xhr.readyState == 4){
// alert(xhr.responseText);
// alert(xhr.responseXML);
//返回DOM对象
var d = xhr.responseXML;
// console.log(d.getElementsByTagName('name')[0].innerHTML);
//获取所有的name元素的值
//拿到dom对象后,之前怎么操作HTML,现在怎么操做XML对象
var n = d.getElementsByTagName('name');
for(var i=0;i<=n.length;i++){
// console.log(n[i].childNodes[0].nodeValue);
console.log(n[i].innerHTML);
}
}
}
xhr.open('get', '06.1xml.php');
xhr.send();
</script>
</html>
6.3 JS解析XML
PHP中解析XML
JS中解析XML
xml
<?xml version="1.0" encoding="utf-8" ?>
<root>
<admin>
<name>路飞</name>
<age>17</age>
</admin>
<admin>
<name>娜美</name>
<age>16</age>
</admin>
</root>