一.异步的XML和javascript
二.作用：在无刷新无提交的情况下实现页面的局部加载，一般用于股票走势图，搜索建议，聊天室等，依赖于底层的xhr对象。
三.get方式
(1)创建一个xhr对象
var xhr=new XMLHttpRequest();
(2)监听xhr状态的改变
xhr.onreadystatechange=function(){
console.log(xhr.readyState+'xhr状态');
console.log(xhr.Status+'状态码');
console.log (xhr.responseText+'响应内容');
//属性：
//1.readyState===4 //请求状态 1,2,3,4
//2.status===200 //响应状态码
}
(3)打开一个连接
xhr.open('get','xxx.php',true);
(4)发送数据
xhr.send(null);
(5)例子
验证用户名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>用户名: <input type="" name="uname" id='uname'><span></span></p>
<p>密码: <input type="" name="upwd"></p>
<p><input type="button" name="" value='注册'></p>
<script type="text/javascript">
uname.onblur=function(){
//获得输入框中输入的内容
var n=uname.value;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
// readyState //请求是否成功 //1-4==4
// status //状态码
//responseText
if(xhr.readyState===4){//请求发送成功了
if(xhr.status===200){//响应成功了
doResponse(xhr);//调用一个函数
}
}
}
xhr.open('get','check_uname.php?uname='+n,true);
xhr.send(null);
}
function doResponse(xhr){
if(xhr.responseText==='cunzai'){
uname.nextElementSibling.innerHTML='用户名已经存在';
}else if(xhr.responseText==='bucunzai'){
uname.nextElementSibling.innerHTML='用户名可用';
}else{
alert('不可识别的响应消息');
}
}
</script>
</body>
</html>
四.post方式
1.创建xhr对象
var xhr=new XMLHttpRequest();
2.监听xhr状态的改变
xhr.onreadystatechange=function(){
属性：
1.readyState===4 //请求状态 1,2,3,4
2.status===200 //响应状态码
}
3.打开一个链接
xhr.open('post','xx.php',true);
3.5修改请求消息头部
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
4.发送数据
xhr.send('uname='+uname);
5.例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>pname:<input type="" name="" id='pname'></p>
<p>pic:<input type="" name="" id='pic'></p>
<p>price:<input type="" name="" id='price'></p>
<p>prodate:<input type="" name="" id='prodate'></p>
<p><input type="button" name="" value='保存' id='btn'></p>
<script type="text/javascript">
btn.onclick = function() {
var p = pname.value;
var c = pic.value;
var r = price.value;
var d = prodate.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
doResponse(xhr);
}
}
}
xhr.open('post', `product_add.php`, true);
//修改请求消息头部
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(`pname=${p}&pic=${c}&price=${r}&prodate=${d}`);
}
function doResponse(xhr) {
if(xhr.responseText === 'succ') {
alert('插入成功');
} else if(xhr.responseText === 'err') {
alert('插入失败');
} else {
alert('不可识别的响应消息');
}
}
</script>
</body>
</html>
五.模糊查询
1.拿关键字和数据库中数据对比
2.精准查询
select * from jd where sname='$sname'
3.客户端提交一个关键字
$kw=$_REQUEST['kw'];
4.模糊查询
select * from jd where sname like '%$kw%'
5.例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="" name="" id='search'>
<div id='list'>
</div>
<script type="text/javascript">
var v;
search.onkeyup=function(){
v=search.value;
console.log(v);
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
doResponse(xhr);
}
}
}
xhr.open('get','search.php?kw='+v,true);
xhr.send(null);
}
function doResponse(xhr){
if(v===''){
list.innerHTML='';
}else{
list.innerHTML=xhr.responseText;
}
}
</script>
</body>
</html>
<?php
$kw=$_REQUEST['kw'];
$conn=mysqli_connect('127.0.0.1','root','','jd',3306);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);
$sql="SELECT * FROM product WHERE pname LIKE '%$kw%'";
$result=mysqli_query($conn,$sql);
$all=mysqli_fetch_all($result,MYSQLI_ASSOC);
// var_dump($all);
foreach ($all as $key => $value) {
echo "<p>$value[pname]</p>";
}
SET NAMES UTF8;
DROP DATABASE IF EXISTS jd;
CREATE DATABASE jd CHARSET=UTF8;
USE jd;
CREATE TABLE product(
pid INT PRIMARY KEY AUTO_INCREMENT,
pname VARCHAR(32)
);
INSERT INTO product VALUES(NULL,'JavaScript Dom编程艺术');
INSERT INTO product VALUES(NULL,'JavaScript权威指南');
INSERT INTO product VALUES(NULL,'JavaScript高级程序设计');
INSERT INTO product VALUES(NULL,'高性能JavaScript');
INSERT INTO product VALUES(NULL,'JavaScript语言精髓与编程实践');
INSERT INTO product VALUES(NULL,'JavaScript DOM高级程序设计');
INSERT INTO product VALUES(NULL,'JavaScript设计模式');
INSERT INTO product VALUES(NULL,'Java Dom编程艺术');
INSERT INTO product VALUES(NULL,'Java权威指南');
INSERT INTO product VALUES(NULL,'Java高级程序设计');
INSERT INTO product VALUES(NULL,'高性能Java');
INSERT INTO product VALUES(NULL,'Java语言精髓与编程实践');
INSERT INTO product VALUES(NULL,'Java DOM高级程序设计');
INSERT INTO product VALUES(NULL,'Java设计模式');
SELECT * FROM product;
网友评论