Ajax使用1
Ajax:
* Ajax概述:
* Ajax的原理
* 什么是Ajax
* 异步和同步
* 同步:
* 客户端页面向服务器端发送请求，直到服务器端将响应发送回来，这个过程中，页面是不能做任何事情。
* 异步:
* 客户端页面向服务器端发送请求，直到服务器端将响应发送回来，这个过程中，页面可以去做任何事情。
* Ajax的定义:
(不严格)客户端与服务器端进行交互,而无需刷新当前页面的技术.
* 作用:
* 可以实现同步交互所不能完成的功能，提高同步实现的效果。
* 页面减少了，只用一个页面即可。
* 缺点:
* 小则怡情，大则伤身（Ajax的异步实现不能过多使用）
* Ajax的原理：
* Ajax的对象:
* Ajax的核心对象:XMLHttpRequest（XHR）对象
* IE使用的是XMLHTTP对象
* 浏览器兼容性:
* 判断当前用户的浏览器是IE还是其他浏览器
* 创建Ajax对象:
function getXHR(){
var xhr;
if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr=new XMLHttpRequest();
}
return xhr;
}
* Ajax对象的属性和方法
* 方法
* open( method, url, async )方法:向服务器端创建一个请求
* method参数：指定当前请求的方式，GET和POST。
* url参数：指定当前请求的服务器端地址
* async参数：指定当前请求是否为异步，Boolean值。
* true：表示异步
* false：表示同步，目前W3C的最新规范不建议使用同步。
* send()方法：发送请求的参数。
* 参数：请求参数
* 0 - 尚未初始化
* 1 - 正在发送请求
* 2 - 请求完成
* 3 - 正在响应
* 4 - 响应完毕
* status：服务器端返回的状态码
* 404 - 找不到网页
* 200 - OK
* 302 - 请求转发
* 304 - 请求缓存
* 500 - 内部服务器错误
* responseText：表示的是服务器端返回的文本内容。
* responseXML：表示的是服务器端返回的XML格式内容。
* 事件
* onreadystatechange：用于监听服务器端的状态变化
* 当readyState属性的值变化时，会触发onreadystatechange事件
* Ajax的作用:
* GET请求：
* 创建Ajax的核心对象：略
* 创建请求：
open( method , url )：
* 如果GET方式的话，请求参数需要添加在URL后面
* 发送请求
send()方法：
* 如果GET方式的话，send( null )
* 接收响应
onreadystatechange事件
readyState和status属性：
* readyState属性：Ajax从请求到响应的整个过程
* status属性：告诉我们Ajax请求是否成功
* responseText属性：接收服务器端的响应
* POST请求：（与GET方式的区别）
* open()方法中的method参数为POST
* 如果请求方式为POST的话，send()方法可以发送请求参数
* 设置请求头信息：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* Ajax的应用:
*简单实例：
*index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<h1>Ajax的GET方式请求测试</h1>
<p>
你看到的这些内容都是当前HTML页面的！
</p>
<hr>
<button id="ajaxsend">ajax请求</button>
<div id="mydiv"></div>
</body>
<script>
var ajaxsend = document.getElementById("ajaxsend");
ajaxsend.onclick=function(){
function getXHR(){
var xhr;
if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr=new XMLHttpRequest();
}
return xhr;
}
// 1 创建Ajax的核心对象
var XmlHttpRequest = getXHR();
// 2 创建请求，使用open( method，url，async )方法
// 注意：当请求方式为GET时，请求参数添加在open()方法url参数的后面。
XmlHttpRequest.open("GET", "server.php", true);
// 3 发送请求，使用send( 请求参数 )方法
// 注意：
// 如果Ajax请求方式是GET方式的话，send()方法是不能发送任何请求数据的。
// 该方法（步骤）是不能被省略的，send(null)
XmlHttpRequest.send(null);
// 4 接收响应，使用onreadystatechange事件（readyState，status，responseText属性）
XmlHttpRequest.onreadystatechange = function(){// function就是onreadystatechange事件的处理函数
// 接收服务器端的响应数据内容，在该处理函数中完成
// a 保证readyState的值为4
if(XmlHttpRequest.readyState==4){
// b 保证status的值为200
if(XmlHttpRequest.status==200){
// 保证服务器端可以正确地响应数据内容
var data = XmlHttpRequest.responseText; // responseText属性只能文本格式的响应数据。
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = data;
}
}
}
}
</script>
</html>
*server.php
<?php
echo "Hello Ajax php";
?>
*城市联动：
index.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>案例</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="myutils.js"></script>
</head>
<body>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
<script>
var provinceSel = document.getElementById("province");
var xhr = getXHR();
xhr.open("get","province.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var provinces = xhr.responseText;
var provinceArr = provinces.split(",");
for(var i=0;i<provinceArr.length;i++){
var province = provinceArr[i];
var option = document.createElement("option");
var textEle = document.createTextNode(province);
option.appendChild(textEle);
provinceSel.appendChild(option);
}
}
}
provinceSel.onchange = function(){
// 清除第二个城市的option
var citySel = document.getElementById("city");
var cityoptions = citySel.getElementsByTagName("option");
// js中的数组长度问题：是可变的
for(var z=cityoptions.length-1;z>0;z--){
var cityoption = cityoptions[z];
citySel.removeChild(cityoption);
}
// 表示选择了不同的省份
var provinceValue;
//1 获取用户当前选择的省份名称
var myoptions = provinceSel.getElementsByTagName("option");
for(var i=0;i<myoptions.length;i++){
var option = myoptions[i];
if(option.selected){
provinceValue = option.value;
break;
}
}
//2 触发Ajax异步请求
xhr.open("POST","cities.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("province="+provinceValue);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var cities = xhr.responseText;
var citiesArr = cities.split(",");
for(var i=0;i<citiesArr.length;i++){
var city = citiesArr[i];
var option = document.createElement("option");
var textEle = document.createTextNode(city);
option.appendChild(textEle);
citySel.appendChild(option);
}
}
}
}
</script>
</html>
province.php：
<?php
echo "辽宁省,吉林省,山东省,河南省,福建省";
?>
cities.php：
<?php
$province = $_REQUEST["province"];
file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);
$cities = "";
if($province=="吉林省"){
$cities = "长春市,吉林市,松原市,延边市,四平市";
}else if($province=="辽宁省"){
$cities = "沈阳市,大连市,铁岭市,盘锦市,葫芦岛市";
}else if($province=="山东省"){
$cities = "青岛市,济南市,威海市,日照市,德州市";
}
echo $cities;
?>
