Ajax(1) 基础 表单验证 省市联动

2019年12月15日00:55:47 评论 49 次浏览

代码位置:全栈教程/04_JS/JS核心第10Ajax第1天/代码/2018-09-13

二、今日目标

  • 1、知道Ajax能够做什么
  • 2、理解Ajax的工作原理
  • 3、能够创建兼容各个浏览器的Ajax对象
  • 4、能够通过get和post方式发送Ajax请求
  • 5、能够用代码写出一次Ajax请求的全部过程
  • 6、能够解决IE缓存
  • 7、能够理解同步和异步请求的区别
  • 8、知道什么是JSON以及它用什么作用
  • 9、能够将JSON数据和PHP数据相互转化
  • 10、能够将JSON数据和JS数据相互转化
  • 11、Ajax请求能够处理服务器返回的JSON格式的数据

三、概述

手册位置:W3C手册 -- 上面的JavaScript -- 左侧的Ajax

1、Ajax历史

1999年,微软在IE5上使用,但是没有被认知。
2005年,谷歌的使用(地图、gmail),使得ajax被全世界所认识,并广泛使用。

2、Ajax是什么

Ajax中的第一个A是Asynchronous [eɪˈsɪŋkrənəs]
(异步)JavaScript and XML的缩写。可以看出它不是一种技术,而是多种技术的综合体。
其中有JavaScript、有xml、有json、有html、有css、有dom、有XMLHttpRequest对象等等。
XMLHttpRequest对象,也叫做Ajax对象,浏览器中自带的对象。
Ajax的工作也是基于http协议的。

3、Ajax能做什么

①、提高用户体验。
②、表单时时验证
Ajax(1) 基础 表单验证 省市联动
③、百度地图、谷歌地图
④、网页版的聊天室
⑤、无刷新的分页

五、XMLHttpRequest对象介绍

1、创建xhr对象(ajax对象)

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

 var xhr = new XMLHttpRequest(); //IE6+
    //var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie5/IE6
    console.log(xhr);

2、主要的成员属性:

readyState:表示xhr工作进行到何种状态

onreadystatechange:事件,表示readyState改变的时候触发的事件

status:http状态码

responseText:用来接收返回的文本类型的数据

responseXML:用来接收返回的是XML格式的数据

3、主要的方法:

open():设置(定义)一个请求

send():发送设置好的请求

setRequestHeader():设置ajax请求头信息

六、使用Ajax的步骤

完成验证用户名案例,要求用户名,就是不能有重复。
页面中有一个文本框,当失去焦点的时候,验证输出的内容是否已经存在。

1、创建所需文件

创建03chkusername.html:

<input type="text" id="username" /> <span id="msg"></span>

创建03chkusername.php

//工作是:验证提交用户输入的用户名是否已经被注册
//为了简化,模拟用户'zhangsan'、'lisi'、‘wangwu’ 已经被注册,其他用户名都可用
$arr = ['zhangsan','lisi', 'wangwu', 'aaa', 'bbb','ccc','ddd','fff', 'ggg'];

2、当input失去焦点,准备发送

Ajax(1) 基础 表单验证 省市联动
因为用get方式请求,所以参数直接写到url上即可。服务器端获取地址栏的参数,同样使用$_GET来获取。

3、发送请求

调用Ajax对象的send方法发送请求到服务器。
Ajax(1) 基础 表单验证 省市联动

4、服务器接收数据并判断

Ajax(1) 基础 表单验证 省市联动
判断完成,将判断的结果返回给浏览器。echo出来的东西就是返回给浏览器的内容。
测试:
Ajax(1) 基础 表单验证 省市联动

5、接收服务器返回的数据,并处理

Ajax(1) 基础 表单验证 省市联动
经过测试,发现并没有成功接收到服务器返回的数据。通过console.log(result);查看到的结果什么都么有。

6、监听Ajax执行状态

发送请求完毕,不应该马上就接收服务器返回的数据,应该判断一下Ajax进行到哪一步了。如果说进行到最后一步了,即服务器返回数据完毕,这个时候才应该获取服务器返回的数据。
Ajax对象中用onreadystatechange属性(事件),来监听(检测)Ajax执行到哪一步了。
Ajax对象中用readyState属性来表示Ajax的状态,具体是readyState属性值如下:
Ajax(1) 基础 表单验证 省市联动
Ajax(1) 基础 表单验证 省市联动

源代码:

03chkusername.html

<input type="text" id="username" /> <span id="msg"></span>

<script>


    //当input失去焦点的时候,发送请求
    document.getElementById('username').onblur = function(){
        //第一步:创建Ajax对象
        var xhr = new XMLHttpRequest();
        //第二步:准备工作
        var uname = this.value; //要发送给服务器的用户名
        //xhr.open(请求方式, 请求的地址, 同步或异步); //该方法用于发送请求前的准备工作
        xhr.open('get', '03chkusername.php?u=' + uname, true); //true表示异步,默认也是true
        //第三步:发送请求到服务器
        xhr.send(); //send的参数表示post请求的参数,因为我们用的是get请求,所以参数不用填
        //当xhr执行的时候,如果状态发生变化,就会触发事件
        xhr.onreadystatechange = function(){
            //readyState可能是变化有:0~1/1~2/2~3/3~4
            if(xhr.readyState == 4){
                //表示服务器完全返回了数据,这时才应该接收数据并处理
                //第四步:接收服务器返回的数据,并处理
                var result = xhr.responseText; //用responseText来接收服务器返回的文本类型的信息
                console.log(result); //输出结果,什么都没有,即不是1,也不是0
                if(result == 1){
                    document.getElementById('msg').innerHTML = '<font color="red">sorry,用户名已存在</font>';
                }else if(result == 0){
                    document.getElementById('msg').innerHTML = '<font color="green">恭喜,用户名可用</font>';
                }
            }
        };

    };

</script>

03chkusername.php

//header("Cache-Control:no-cache");
//header("Pragma:no-cache");
//header("Expires:-1");

//工作是:验证提交用户输入的用户名是否已经被注册
//为了简化,模拟用户'zhangsan'、'lisi'、‘wangwu’ 已经被注册,其他用户名都可用
$arr = ['zhangsan','lisi', 'wangwu', 'aaa', 'bbb','ccc','ddd','fff', 'ggg'];

//接收发送过来的数据,并判断
$u = $_GET['u'];
//判断
if(in_array($u, $arr)){
    //说明用户名已经存在
    echo 1;
}else{
    //说明用户名可用
    echo 0;
}

7、使用Ajax步骤总结

Ajax(1) 基础 表单验证 省市联动

七、细节问题

1、编码字符

为什么要编码:
Ajax(1) 基础 表单验证 省市联动
解决的办法就是对用户输入的内容进行编码。

encodeURI() --- 不能对“:/=&”进行编码,能对汉字进行编码

encodeURIComponent() --- 能对“:/=&”进行编码,也能对汉字进行编码

Ajax(1) 基础 表单验证 省市联动
一般情况下,JS编码后发送到服务器,PHP会自动解码,如果没有自动解码,用PHP的函数urldecode来解码。

2、缓存处理

什么是Ajax缓存原理?
Ajax在发送的数据成功后,会把请求的URL和返回的响应结果保存在浏览器缓存内,当下一次调用Ajax发送相同的请求时,它会直接从缓存中把数据取出来,这是为了提高页面的响应速度和用户体验。当前这两次请求URL完全相同,包括参数。这个时候,浏览器就不会与服务器交互
两次请求的地址完全一致(包括参数),那么IE就会从缓存中取服务器上一次返回的结果。而不会从新向服务器发送请求。
测试方法:
先输入一个不存在的用户名,比如bbb,失去焦点,发送一次Ajax请求,然后不刷新页面。打开php文件,向数组中加入用户名bbb。回到浏览器,还不能刷新,再次失去焦点。如下图
Ajax(1) 基础 表单验证 省市联动
如何解决IE缓存的问题:

1、在ajax发送请求前加上

 xhr.setRequestHeader("If-Modified-Since","0"); //实测可用

2、在服务器端加

header("Cache-Control:no-cache");
header("Pragma:no-cache");
header("Expires:-1");

加入三个header,目的是让所有的浏览器都不缓存。

3、在 Ajax 的 URL 参数后加上

 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

4、第种方法和第3种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime();

Ajax(1) 基础 表单验证 省市联动

5、用POST替代GET:不推荐

以上几种方式,比较推荐第3和第4中方法。

3、get和post请求

使用POST请求:
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
Ajax(1) 基础 表单验证 省市联动
服务器接收数据用$_POST.
Ajax(1) 基础 表单验证 省市联动
ajax中的get和post的一些说明:
①、用post请求,不会产生缓存。
②、用post请求的时候,能不能也用get,即post和get请求同时使用。答案是能,只不过get请求的参数用\(_GET获取,post请求的参数用\)_POST获取。
③、用$_REQUEST获取get和post方式提交的参数,如果参数名相同,获取的是谁?获取的是post的内容

4、同步、异步

同步请求,在同一个时间点上,只能有一个进程;其他进程只能等待。
异步请求,在同一个时间点上,可以同时进行多个进程。
open方法的第三个参数表示同步或者是异步请求。默认值true表示异步请求,false表示同步请求。
Ajax(1) 基础 表单验证 省市联动

5、请求的url如果出错怎么办

Ajax(1) 基础 表单验证 省市联动
以后写Ajax的时候,不但要判断readyState的值是否为4,还要判断http状态码status属性的值是否是200.

八、JSON

w3c手册位置:上面的javascript – 左侧的JSON

1、什么是json

json本质就是字符串,只不过这个字符串的格式有要求,格式要符合js中的数组或对象的格式

 "['apple', 'orange', 'banana']"
"{name:'zhangsan', age:20}"

Ajax(1) 基础 表单验证 省市联动
更加复杂的情况:

"[{id:1, name:'宋江', age:30}, { id:2, name:'卢俊义', age:30}, { id:3, name:'吴用', age:30}]"

2、JSON有什么用

json在web开发中,它起到的作用和xml和的作用一样。具体来说,json可以当做配置文件,json文件可以存储数据,
json可以当做两种编程语言交换数据的媒介。
Ajax(1) 基础 表单验证 省市联动

3、json和PHP进行转换

1、把PHP数据转化成json格式

使用json_encode()函数
Ajax(1) 基础 表单验证 省市联动

$arr1 = ['apple', 'banana', 'pear'];
$arr2 = ['one'=>'LiuBei', 'two'=>'GuanYu', 'three'=>'CaoHao'];

//把上面两个数组,转换成JSON
$str1 = json_encode($arr1);
echo $str1; // ["apple","banana","pear"]
echo '<br>';
$str2 = json_encode($arr2);
echo $str2; // {"one":"LiuBei","two":"GuanYu","three":"CaoHao"}

//将str1和str2转成PHP数据
echo '<pre>';
print_r(json_decode($str1));
print_r(json_decode($str2, true));//加入true表示转回数组格式,否则默认对象形势

2、把json格式数据转化成PHP数据

json_decode(数组,true);//加入true表示转回数组格式,否则默认对象形势

Ajax(1) 基础 表单验证 省市联动

4、json和JavaScript进行转换

1、把js数据转化成json

使用的方法是JSON对象的stringify()方法。
Ajax(1) 基础 表单验证 省市联动

2、把json数据转化成js数据

方法一是使用JSON.parse(json字符串)方法;

Ajax(1) 基础 表单验证 省市联动

方法二是使用eval函数。

Ajax(1) 基础 表单验证 省市联动

5、小结

Ajax(1) 基础 表单验证 省市联动

九、Ajax中,服务器返回json格式的数据

创建07json.html,向07json.php发送ajax请求。
Ajax(1) 基础 表单验证 省市联动
服务器中的07json.php,返回一个数组。但是PHP的数据和JS的数组不一样,所以要转换成JSON格式,然后再返回:
Ajax(1) 基础 表单验证 省市联动
再看07json.html,接收到服务器返回的数据(JSON格式),然后通过JSON.parse转换JS数据,就可以处理。
Ajax(1) 基础 表单验证 省市联动

十、案例--省市县三级联动

1、资料说明

08city.sql 资料中,包含三张表,sheng、shi、xian。
Ajax(1) 基础 表单验证 省市联动
查询所有的省:

select * from sheng;

查询河北省中的市:

select * from shi where ProvinceCode = 130000;

查询石家庄市的县:

select * from xian where CityCode = 130100;

2、创建所需文件

08city.html:

<select id="sheng">
    <option value="0">--请选择省--</option>
</select>

<select id="shi">
    <option value="0">--请选择市--</option>
</select>

<select id="xian">
    <option value="0">--请选择县--</option>
</select>

Ajax(1) 基础 表单验证 省市联动
08city.php,接收到浏览器发来的Ajax请求,连接数据库,获取省。获取完毕,转换成JSON类型返回给浏览器:
Ajax(1) 基础 表单验证 省市联动
JS接收服务器返回的数据,并处理成JS数组,然后创建option,给option赋值value属性,并添加到select框中:
做这块的时候,要经常通过浏览器工具来查看错误。
Ajax(1) 基础 表单验证 省市联动
最终效果是:
Ajax(1) 基础 表单验证 省市联动

/全栈教程/04_JS/JS核心第11Ajax第2天

4、省切换的时候,获取市

给sheng绑定事件,执行Ajax请求:
Ajax(1) 基础 表单验证 省市联动
PHP代码:
Ajax(1) 基础 表单验证 省市联动
浏览器检测,没有问题。下面处理返回的结果:
Ajax(1) 基础 表单验证 省市联动

5、市切换的时候,获取县

HTML代码:
Ajax(1) 基础 表单验证 省市联动
PHP代码:
Ajax(1) 基础 表单验证 省市联动
一个问题,省切换的时候,不但要重置市,还有重置县:
Ajax(1) 基础 表单验证 省市联动

四、优化省市县三级联动

1、将数据库修改为文件

省市县的数据,不会经常变动,基本上可以认为是不变的数据。对于这样的数据,最好不要存到数据库,用文件存放也是一样的,而且用文件存放还可以减轻数据库的压力。所以用文件把省市县的数据存储,然后去查文件。
Ajax(1) 基础 表单验证 省市联动

2、简化PHP代码

复制02city.html为03city.html。复制02city.php为03city.php
复制city文件夹到项目中:
Ajax(1) 基础 表单验证 省市联动
查询省、市、县的时候都根据文件名去查找,并且约定浏览器请求的时候,要传递filename参数,参数的值就是文件名。
Ajax(1) 基础 表单验证 省市联动

3、修改JS代码

Ajax(1) 基础 表单验证 省市联动
Ajax(1) 基础 表单验证 省市联动Ajax(1) 基础 表单验证 省市联动

4、简化JS代码

封装\(、chuli、get三个函数:
\) : 根据元素的id,返回dom对象
chuli : 传入要处理的数据,并且传入要放入的位置。
get :执行ajax请求,参数1是url地址,参数2是一个函数,用于处理服务器返回的数据。
chuli函数:
Ajax(1) 基础 表单验证 省市联动
\(函数
![-w636](media/15714037815352/15714686776758.jpg)
get函数
![-w856](media/15714037815352/15714686873343.jpg)省市县获取代码:
![-w862](media/15714037815352/15714686985015.jpg)
==写的\)、get函数做什么项目都可以使用,可以将这两个函数写到一个js文件中。==
Ajax(1) 基础 表单验证 省市联动

继续阅读
weinxin
加我微信
微信扫一扫,加我微信好友,共同交流,共同进步! (备注:焦国强博客)
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: