ajax作用:ajax 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术.(实现浏览器与服务器之间的数据交互,实现页面的无刷新请求服务器,提高用户体验)
基本使用:
1.创建ajax对象:
new XMLHttpRequest() //普通浏览器使用,ie浏览器有特殊
2.创建事件函数(处理服务器返回的结果):
onreadystatechange
readyState ajax对象状态:0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4请求已完成,且响应
status 响应码:200:'ok' 404:未找到页面 403:权限不足
responseText 接受服务器的返回的数据
3.初始化ajax请求
get --- xmlhttp.open('GET',1.php?a=1&b=2&c-3',true);
post --- xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded"):
xmlhttp.open('POST','1.php',true);
4.发送ajax请求 --- send()
服务器返回
echo 普通的字符串
普通html文件
返回xml字符串
索引数组
关联数组
注意事项
同源策略-当前页面要和服务器的协议地址和端口都要相同
post发送ajax请求
--- setRequestHeader("content-type','application/x-www-from-urlencoded");
--- 发送参数 send("a=100&b=www")
firebug的使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 例子:<script type="text/javascript">//1.创建ajax对象var x = new XMLHttpRequest;//2.触发事件x.onreadystatechange = function(){ // on ready 准备 state状况 changge if(x.readyState == 4 && x.status == 200){ console.log(x.responseText); //返回的结果 }}//3.初始化x.open('GET','fuxi.php?id=100',true); //true 异步 false是同步//4 发送x.send(); //发送ajax如果是post 方式3步和4步发生改变x.open('POST','3.php',true);x.setRequestHeader('content-type','application/x-www-form-urlencoded');重要x.send('a=100&b=200'); |
配合php PDO预处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php $id = $_GET['id']; $pdo = new PDO('mysql:host=localhost;dbname=pass;charset=utf8','root','123456'); //准备预处理 $stmt = $pdo->prepare('select * from phones where id = ?'); //赋值 $arr = [$id]; //执行 $stmt->execute($arr); //获取结果 $res = $stmt->fetch(PDO::FETCH_ASSOC); // var_dump($res); $row = json_encode($res); echo $row;
|
