Ajax:一种异步数据请求的技术,在本页面不刷新的情况,本页面数据可以和服务器端进行通信
核心对象: xmlHttp 浏览器对象。因为是基于浏览器,使用ajax技术时,不须任何插件,
原理:
1 当本页面浏览器加载完成时,并操作完成时,当面页面没有刷新的情况下,页面数据还在进行,
2 cpu 内存都在运行, cpu 内存分配一部分资源出来,通过浏览器对象,把本页面数据传出,再通过浏览器对象,把须要数据传入。
ajax开发过程:
1 创建一个xmlHttp
2 通过open的方式创建一个请求,一种路径,将要用于发 收 数据的路径。
3 设置回调状态,来判断是否通信成功
状态细分
0 未初始化
1 正在请求中
2 请求完成
3 请求完成后数据开始传输
4 数据通信成功
200 客户端收到了服务器发回的数据
4 把整个流程通过send发出去
这四步是有序的。
我这里使用的是js操作 之所以没用juery是想先学低层点的
例如验证码的生成
tel:<input type="text" name="tel" id="tel" />
<input type="button" name="takeCode" id="takeCode" onclick="getTel()" value="获取验证码"/>
code:<input type="text" name="code" id="code" />
然后开始写js
第一步是要写一个获取到浏览器http对象的函数
function getXhr() {//得到xmlHttp 浏览器对象
var xhr = null;
if (window.XMLHttpRequest){//winxp的获取
xhr = new XMLHttpRequest();
}else {//xp以上的获取
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
然后获取到对象了
通过open的方式创建一个请求
function getTel() {
var xhr = getXhr();//1.获取对象
var tel = document.getElementById("tel").value;
//alert(tel);
xhr.open("get","getIn.do?tel="+tel,true);//open打开连接请求 这里可以使用get或者post
xhr.onreadystatechange = function () {//当状态改变时
if (xhr.readyState==4&&xhr.status==200){//readyState=4是数据通信成功 status==200是客户端收到了服务器发回的数据
document.getElementById("code").value = xhr.responseText;//是服务器返回的数据
}
}
xhr.send();//最后一定要发送
}
这里会发送出请求 我们需要配置好servlet然后检查
然后写
public void service( HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");//设置编码格式
response.setContentType("text/html;charset=UTF-8");
String uri = request.getRequestURI();//获取uri
uri = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if (uri.equals("/getIn")){
PrintWriter writer = response.getWriter();
String tel = request.getParameter("tel");
if (tel.length()==11){
writer.print(getRandom(6));
}else {
writer.print("电话格式不对");
}
}
}
private String getRandom(int n){
Random random = new Random();
StringBuilder randomNum = new StringBuilder();//使用stringBuilder是应为比string优点更多
for (int i = 0;i<n;i++){
randomNum.append(random.nextInt(10));
}
return randomNum.toString();
}
最后看一下效果
然后post和get的区别
post更加安全
使用稍有不同
第一点 open不用加传的数据
xhr.open("post","getIn.do",true);
要传的数据需要写在send中 例如
xhr.send("tel="+tel);
然后还需要设置头部请求
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
就这样 运行效果和get相同
然后结合学习做了一个小作业
由于最近学习Android 刚好也是要用到城市选择 所以就做了 然后顺带做了api 输出json
地址:省份json 默认是显示所有省份
地址:http://www.zhongxia5211.cn:8089/learnAjax_war/api.do?provinceId=1
注:
provinceId=1 是省份的id为1下所有的城市
地址:http://www.zhongxia5211.cn:8089/learnAjax_war/api.do?cityId=20
cityId=20是 城市id为20下的所有县
不知道不是我数据库插入写的不好的原因 部分数据没有插入
地址:http://www.zhongxia5211.cn:8089/learnAjax_war/cityChoose.jsp