ajax 快速入門 ajax作用:ajax 是在不重新載入整個頁面的情況下與伺服器交換數據並更新部分網頁的技術.(實現瀏覽器與伺服器之間的數據交互,實現頁面的無刷新請求伺服器,提高用戶體驗) 基本使用: 1.創建ajax對象: new XMLHttpRequest() //普通瀏覽器使用,ie瀏覽器 ...
ajax 快速入門
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的使用
例子:
<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預處理
<?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;
