ajax的入门简单使用

最新推荐文章于 2022-05-21 11:45:46 发布

weixin_41722013

最新推荐文章于 2022-05-21 11:45:46 发布

阅读量155

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_41722013/article/details/79318865

版权

AJAX:
 定义：异步的JavaScript and xml
 Ajax的原理：通过XmlHttpRequest对象来向服务器发异步请求，
 从服务器获得数据，然后用javascript来操作DOM而更新页面
 XMLHttpRequest：
 属性：readyState： 0(未初始化) 1(初始化) 2(发送数据) 3(数据传送中) 4(完成)
 onreadystatechange 当XMLHttprequest 状态改变的时候触发的一个函数
 status 获得响应的状态码 200 302 304 404 500
 responseText 获得相应的文本数据
 responseXML 获得相应的xml数据
 方法：open(请求方式，请求路径，是否异步)
 send(请求参数)
 sendRequestHeader(头信息，头的值) 处理post请求方式的中文问题
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 创建XMLHttpRequest异步对象
 function createXmlHttp(){
 var xmlHttp;
 try{ // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
 catch (e){
 try{// Internet Explorer
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e){
 try{
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e){}
 }
 }

 return xmlHttp;
 }
 AJAX初级编写步骤：
 【GET方式提交请求】
 function ajax_get() {
 // 1.创建异步对象
 var xhr = createXMLHttp();
 // 2.设置状态改变的监听回调函数.
 xhr.onreadystatechange = function(){
 if(xhr.readyState == 4){ // 请求发送成功
 if(xhr.status == 200){ // 响应也成功
 // 获得响应的数据:
 var data = xhr.responseText;
 // 将数据写入到DIV中:
 document.getElementById("d1").innerHTML = data;
 }
 }
 }
 // 3.设置请求路径
 xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
 // 4.发送请求
 xhr.send(null);
 }
 【POST方式提交请求】
 function ajax_post(){
 // 创建异步对象:
 var xhr = createXMLHttp();
 // 设置监听:
 xhr.onreadystatechange = function(){
 if(xhr.readyState == 4){
 if(xhr.status == 200){
 document.getElementById("d1").innerHTML = xhr.responseText;
 }
 }
 }
 // 打开路径:
 xhr.open("POST","/day15/ServletDemo1",true);
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 // 发送请求:
 xhr.send("name=张三&pass=123");
 }
 例：使用AJAX完成注册页面用户名是否已经注册的校验
 function checkUsername(){
 // 获得文本框的值:
 var username = document.getElementById("username").value;
 // 创建异步对象:
 var xhr = createXMLHttp();
 // 设置监听:
 xhr.onreadystatechange = function(){
 if(xhr.readyState == 4){
 if(xhr.status == 200){
 var data = xhr.responseText;
 if(data == 1){
 document.getElementById("s1").innerHTML = "用户名可以使用";
 document.getElementById("regBut").disabled = false;
 }else if(data == 2){
 document.getElementById("s1").innerHTML = "用户名已经被占用";
 document.getElementById("regBut").disabled = true;
 }
 }
 }
 }
 // 打开连接:
 xhr.open("GET","/day15/ServletDemo2?username="+username,true);
 // 发送请求:
 xhr.send(null);
 }
 使用JQ完成对用户名异步校验的功能：
 JQuery的AJAX部分方法:
 * Jq的对象.load(路径,参数,回调函数);
 * $.get(路径,参数,回调函数,数据类型);
 * $.post(路径,参数,回调函数,数据类型);
 * $.ajax({
 type:"post",
 url:"",
 data:'{}',
 contentType:"application/json;charset=utf-8",
 success:function(data){

 }
 });
 * serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.(封装form表单的参数)
 【代码实现】
 $(function(){
 $("#username").blur(function(){
 // 获得文本框的值:
 var username = $(this).val();
 // 演示load方法:
 // $("#s1").load("/day15/ServletDemo3",{"username":username});
 // 演示get/post方法:
 $.get("/day15/ServletDemo3",{"username":username},function(data){
 if(data == 1){
 $("#s1").html("用户名可以使用");
 $("#regBut").attr("disabled",false);
 }else if(data == 2){
 $("#s1").html("用户名已经存在");
 $("#regBut").attr("disabled",true);
 }
 });
 });
 });
 使用JQ完成仿百度提示页面
 $(function(){
 // 为文本框绑定事件:
 $("#word").keyup(function(){
 // 获得文本框的值:
 var word = $(this).val();
 // 异步发送请求:
 if(word != ""){
 $.post("/day15/ServletDemo4",{"word":word},function(data){
 $("#d1").show().html(data);
 });
 }else{
 $("#d1").hide();
 }
 });
 });
Ajax的响应的数据格式【xml】：
 通常使用工具是：XStream 将集合数组对象转成xml 【导包】
 【省市二级联动代码】
 //获取省份的value值pid
 String pid=request.getParameter("pid");
 //调用service层查询省份对应的城市数据
 ProvinceService ps=new ProvinceService();
 List<City> list=ps.findcity(pid);
 //创建XStream
 XStream xsm=new XStream();
 //设置标签为 city
 xsm.alias("city",City.class);
 //解析
 String xml = xsm.toXML(list);
 //响应回去
 response.setContentType("text/html;charset=utf-8");
 response.getWriter().println(xml);

 $(function(){
 // 为省份下拉列表绑定事件:
 $("#province").change(function(){
 // 获得选中的省份的id:
 var pid = $(this).val();
 $.post("/day15/ServletDemo6",{"pid":pid},function(data){
 //获取city 并且清空数据
 var $city = $("#city");
 $city.html("<option>-请选择-</option>");
 //遍历响应回来的数据
 $(data).find("city").each(function(){
 var cid = $(this).children("cid").text();
 var cname = $(this).children("cname").text();
 $city.append("<option value='"+cid+"'>"+cname+"</option>");
 });
 });
 });
 });
Ajax的响应的数据格式【json】：
 JSON的数据格式:
 有两种数据格式：数组 对象
 {"id":1,"name":"aaa"}-----对象
 [{"id":1,"name":aaa},{"id":2,"name":bbb}]----数组 (数组内的元素是对象)
 {"city":{"cid":1,"cname":"aaa"}}
 JSON的生成格式：
 1 JSONLIB转换JSON数据：【导包】
 JSONArray:将数据和list集合转成JSON
 JSONObject：将对象和map集合转成JSON
 2 fastJson
 【省市联动代码】
 //接收参数
 String pid=request.getParameter("pid");
 //调用业务层
 ProvinceService ps=new ProvinceService();
 List<City> list=ps.findcity(pid);
 //jsonconfig设置要转的参数不包含什么
 JsonConfig config=new JsonConfig();
 config.setExcludes(new String[]{"pid"});
 //使用JSONArray转数据
 JSONArray jsonArray = JSONArray.fromObject(list, config);
 //响应回去
 response.setContentType("text/html;charset=utf-8");
 response.getWriter().println(jsonArray.toString());

 $(function(){
 // 为省份下拉列表绑定事件:
 $("#province").change(function(){
 //获取pid参数
 var pid = $(this).val();
 $.post("/day15/ServletDemo8",{"pid":pid},function(data){
 //获取city 并且清空数据
 var $city = $("#city");
 $city.html("<option>-请选择-</option>");
 //遍历数据
 $(data).each(function(i,n){
 $city.append("<option value='"+n.cid+"'>"+n.cname+"</option>");
 });
 },"json");
 });
 });