入门ajax

佚名 6年前 (2019-04-11) 随笔 887人围观抢沙发百度已收录

在html页面发出请求常用的有两种情况：一个是表单submit 一个是创建xhr对象（一般请求头要设置 xhr.setRequestHeader=("Content-Type","application/x-www-form-urlencoded"); 服务器接收到自定义头部信息后可以执行相应的后续操作) 客户端响应请求时xhr常用的属性为status(服务器状态码),responseText(获取服务器的响应文本),timeout(xhr发送请求的超时ms,responeXML(获取服务器响应的xml对象)等等

还有一点查询字符串的格式例子 http://www.baidu.com?name=value$password=value2 在发送Get和Post请求时第二个参数url后可加入查询字符串以便将信息发送给服务器 ex:xhr.open("get","www.baidu.com?name=value$password=value2",true) Get方法发送请求会在地址栏暴露信息 Post不会所以安全性相对较高表单除了可以用submit提交请求也可以用xhr方式（传入url 或者将序列化之后的表单当成请求主体在xhr.send(序列化后的表单)传入即可（序列化表单即将表单里的各个字段拼接成查询字符串的格式）XMLhtttpRequest2级有个新类型FormData 更方便表单序列化后提交这个过程：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

var xhr=new XMLHttpRequest;
xhr.onload=function(){
    if(xhr.status >= 200 || xhr.status < 300 || xhr.status == 304){
         alert(xhr.responseText);
   }else{
    alert("Request was unsuccessful:" + xhr.status);
    }
};

xhr.open("POST","exp.jsp",true);
/*xhr.setRuestHeader("Content-Type","application/x-www-urlencoded");
  var form= document.getElementById("form");
  xhr.send(serialize(form));   */  //seriaize()是序列化表单的方法
var form= document.getElementById("form");
var data=new FormData(form);
xhr.send(data);

下面做一个简单的例子：

写了一个HTML静态页面，jsp负责响应html的请求

html：

<select name="first" id="first" onchange="change(this.value);" >
            <option value="1" selected="selected">中国</option>
            <option value="2">美国</option>
            <option value="3">日本</option>
        </select>
        <div id="div"></div>
        <div id="div2"></div>

js:

var xhr= new XMLHttpRequest();
            function change(id){
                var url = "second.jsp?id=" + id;
                xhr.open("POST",url,true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.onload= processResponse;
                xhr.send(null);
            }
            function processResponse(){
                if(xhr.status >= 200 || xhr.status <300 || xhr.status == 304 ){
                    var headers = xhr.getAllResponseHeaders();
                    alert(typeof headers+"\n"+headers);
                    document.getElementById("div").innerHTML = xhr.responseText ;  //返回响应文本
                    document.getElementById("div2").innerHTML =  headers ;   //返回相应头
                }
                else{
                    window.alert("页面异常。");
                }
            }

jsp:

<%@ page contentType ="text/html; charset=utf-8" import="java.util.*" language="java" %>

<% 
 String idStr = (String)request.getParameter("id");
 int id = (idStr == null?1:Integer.parseInt(idStr));
 System.out.println(id);
 switch(id){
 case 1:
%>
 上海广州北京
<% 
  break;
  case 2:
%>
 华盛顿纽约加州
<%
  break;
  case 3:
%>
  东京大阪福冈
<%  
  break;
 }
%>