JavaScript - Ajax
1.同步异步
同步：在某一段时间内，依次执行-->并行
异步：在某一时间点上，同时执行-->并发
AJAX：异步的局部刷新技术
2.优缺点
优点：
- 增强用户体验
- 因为服务器无需在响应整个页面，只需要响应部分内容所以减轻服务器压力
缺点：
- ajax不能应用在所有场景
- 无端的增多了对服务器的访问次数，给服务器带来了压力
3.创建http，请求获取ajax
function xmlHttpRequest()
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
4.JS中ajks代码格式
onload-加载 onblur-失去焦点 open-打开 send- undefined-未定义 console.log-打印 innerHTML-在浏览器指定地点显示
带有var的是局部变量，没有var的是全局变量
注意：
在后台处理的时候out.print后不能加ln
在后台处理的时候不能写转发和重定向
window.onload = function(){
var username = document.getElementById('username');
var err= document.getElementById('err');
var data;
username.onblur = function(){
//获取ajax
var req = xmlHttpRequest();
//在地址栏输入网址
req.open('get/post','访问地址？username='+username.value);
//发送请求，把username传给后台
req.send(null);//这是get提交，如果是post提交将要传的值写到括号中
//后台处理，判断后返回字符串，数据库中有则返回no，没有则返回yes
//接收str
req.onreadystatechange = function(){
if(req.status==200 && req.reqdyState==4){
data = req.responseText;//将后台传来的值封装到responseText中
//成功的状态
if(data==no){
console.log("用户名重复");
err.innerHTML = "用户名重复";
}else{
console.log("用户名可以注册");
err.innerHTML = "用户名可以注册";
}
}else{
console.log("err="+data);//失败的状态
}
}
}
}
5.状态码
5.1.status：HTTP的状态码
| 状态码 | 说 明 |
|---|---|
| 200 | 服务器响应正常 |
| 400 | 无法找到请求的资源 |
| 403 | 没有访问权限 |
| 404 | 访问的资源不存在 |
| 500 | 服务器内部错误 |
| 5.2.ajax状态码 | |
| onreadystatechange-指定回调函数 | |
| readyState:XMLHttpRequest的状态信息 | |
| 就绪状态码 | 说 明 |
| --------------- | ------ |
| 0 | XMLHttpRequest对象没有完成初始化，即：刚刚创建 |
| 1 | XMLHttpRequest对象开始发送请求，调用了open方法但还没调用send方法，请求还没有发出 |
| 2 | XMLHttpRequest对象请求发送完成，send方法以调用，数据已经提交到服务器，但没有任何响应 |
| 3 | XMLHttpRequest对象开始读取响应，还没有结束，收到了所有的响应消息头，但正文还没有完全收到 |
| 4 | XMLHttpRequest对象读取响应结束，一切都收到了 |
| 6.省市联动 | |
| 创建List集合 | List |
| ------------------------------------------------------------ | ------ |
| a.substring(start,stop).split(" "); | substring方法用于提取中介于两个指定下标之间的字符,spilt按照括号内内容切割 |
| 模板字符串 | ·· 数字1旁边的点 |
| 下拉框改变事件 | onchange |
window.onload = function(){
var cap = document.getElementById("cap");
var city= document.getElementById("city");
cap.onchange = function(){
//发送ajax
var req = xmlHttpRequest();
//在地址栏输入网址
req.open("get","地址?cap="+cap.value);
//发送请求，把username传给后台
req.send(null);
//后台处理，判断后返回字符串
//接收str
req.onreadystatechange = function(){
if(req.status==200 && req.readyState==4){
var data = req.responseText;
console.log(data);
var arr = data.substring(1,data.length-1).split(", ");
console.log(arr);
for(var i=0;i<arr.length;i++){
city.innerHTML+="<option value='"+i+"'>"+arr[i]+"</option>"
}
}
}
}
}
select
public class Aj extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8"); //解决post乱码问题，将请求的编码转化为utf-8
response.setContentType("text/html;charset=utf-8"); //解决post乱码问题，将响应的编码转化为utf-8
PrintWriter out = response.getWriter();
String cap = request.getParameter("cap");
System.out.println("cap="+cap);
if("0".equals(cap)){
List<String> heilist = Arrays.asList("哈尔滨","齐齐哈尔","牡丹江","佳木斯");
out.print(heilist);
System.out.println("heilist="+heilist);
}else{
List<String> liaoList = Arrays.asList("沈阳","大连","葫芦岛");
out.print(liaoList);
System.out.println("liaoList="+liaoList);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
