Ajax 异步加载

文章目录

    • Ajax
      • 数据请求 Get
        • 创建ajax请求对象
        • 发送请求
      • XMLHttpRequest readyState状态表
      • 数据请求 Post
    • JQuery Ajax
      • 底层ajax写法
      • get请求
      • post请求
      • 获取JSON数据专用方法
    • 服务器和客户端数据传输的方式
      • xml
      • json
        • fastjson库
    • 练习案例 校验用户名是否可用
      • 需求分析
    • 案例练习二 使用Ajax技术实现省市联动
      • 需求分析
    • 总结
      • Ajax
      • JQuery
      • 服务器返回json数据

Ajax

  • 是什么?

“Asynchronous Javascript And XML”(异步JavaScript和XML),

并不是新的技术,只是把原有的技术,整合到一起而已。

1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
  • 有什么用?

咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动,只刷新某些地方。

数据请求 Get

创建ajax请求对象

function  ajaxFunction(){
	    var xmlHttp;
	    try{ // Firefox, Chrome, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
	        try{// Internet Explorer(高版本)
	            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	        }
	        catch (e){
	            try{// Internet Explorer(低版本)
	                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	            }
	            catch (e){}
	        }
	    }
	    return xmlHttp;
	}

发送请求

//执行get请求
function get() {

    //1. 创建xmlhttprequest 对象
    var request = ajaxFunction();

    //2. 发送请求。
    /*	
	 *	参数一: 请求类型  GET or  POST
	 *	参数二: 请求的路径
	 *	参数三: 是否异步, true  or false
	 */
    request.open("GET" ,"TestServlet" ,true );
    request.send();
}



// 如果发送请求的同时,还想获取数据,那么代码如下

//执行get请求
function get() {

    //1. 创建xmlhttprequest 对象
    var request = ajaxFunction();

    //2. 设置请求参数
    request.open("GET" ,"TestServlet?name=aa&age=18" ,true );

    //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变,那么就执行 = 号右边的方法
    request.onreadystatechange = function(){
        // readyState的值一共有5个状态,参见下表
        // readyState == 4 表示请求已经完成, 再判断状态码是否是200,200表示服务端正常响应(没有报错)
        if(request.readyState == 4 && request.status == 200){
            //弹出响应的信息
            alert(request.responseText);
        }
    }
    
    // 4. 发送请求
    request.send();
}

XMLHttpRequest readyState状态表

状态 描述
0 UNSENT 代理被创建,但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用。
2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得。
3 LOADING 请求中; responseText 属性已经包含部分数据。
4 DONE 请求完成。

数据请求 Post

<script type="text/javascript">
	//1. 创建对象
	// 和get请求一样
	
	function post() {
		//1. 创建请求对象
		var request = ajaxFunction();
		
		// 2. 设置请求地址、参数、类型(post、get)
		request.open("post", "StudentServlet", true);
		
		//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变,那么就执行 = 号右边的方法
	    request.onreadystatechange = function(){
	        //前半段表示 已经能够正常处理。  再判断状态码是否是200
	        if(request.readyState == 4 && request.status == 200){
	            //弹出响应的信息
	            console.log("请求完成");
	            var h1 = document.getElementById("h1");
	        	h1.innerHTML = request.responseText;
	        }
	    }
		
	 	// 4. 如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		
		// 5. 发送请求
    	// 如果是GET请求,参数写在这里是无效的
		request.send("id=555");
	}

</script>

JQuery Ajax

底层ajax写法

// 语法:$.ajax(url, [settings]);

$.ajax("TestServlet", {
    type: "GET",
    data: {
        action: "json",
        uname: "zhangsan"
    },
    dataType: "json",
    success: function(data, status_text){
        console.log(data);
        console.log("status_text: " + status_text);
    },
    error: function(xhr, textStatus, errorThrow) {
        console.log("请求失败");
    }
});

. a j a x 方 法 是 其 他 所 有 a j a x 相 关 方 法 的 底 层 实 现 , 其 他 方 法 都 是 在 它 的 基 础 上 给 我 们 封 装 的 更 方 便 使 用 的 方 法 。 关 于 .ajax方法是其他所有ajax相关方法的底层实现,其他方法都是在它的基础上给我们封装的更方便使用的方法。 关于 .ajaxajax便使.ajax的详细介绍参见 http://jquery.cuishifeng.cn/jQuery.Ajax.html

get请求

/*
 * 参数:
 *  url: 请求地址
 *  data: 待发送 Key/value 参数
 *  fn: 请求成功后回调函数
 *  type: 返回内容格式,xml, html, script, json, text, _default
 */

$.get( "url",{pid:pid} ,function(data,status_text){
    console.log(data);
    console.log("status_text: " + status_text);
},"json" );	// 指定请求返回的格式是json,jquery会帮我们把服务端返回的json字符串转换成js的json对象

post请求

/*
 * 参数:
 *  url: 请求地址
 *  data: 待发送 Key/value 参数
 *  fn: 请求成功后回调函数
 *  type: 返回内容格式,xml, html, script, json, text, _default
 */

$.post( "url",{pid:pid} ,function(data,status){
    console.log(data);
    console.log("status_text: " + status_text);
},"json" );	// 指定请求返回的格式是json,jquery会帮我们把服务端返回的json字符串转换成js的json对象

获取JSON数据专用方法

$.getJSON("url", {id:1, name: "zhangsan"} function(json){
  console.log(json);
});

服务器和客户端数据传输的方式

xml

因为无效数据占比太大,阅读困难。基本已经被json格式淘汰掉了

  	<list>
        <city>
        <id>1<id>
        <pid>1pid>
        <cname>深圳cname>
        city>
        <city >
        <id>2<id>
        <pid>1pid>
        <cname>东莞cname>
        city>
    list>

json

阅读性更好 、 占用空间更小。

[{city:{id:1, pid:1, cname:"深圳"}}, {city:{id:2, pid:1, cname:"东莞"}}]

fastjson库

JSON.toJSONString();	// 将JavaBean encode成 json string
JSON.parseObject();		// 将json对象decode成javabean
JSON.parseArray();		// 将json数组decode成java List或 JSONArray类型

练习案例 校验用户名是否可用

需求分析

  • 页面

      
  • 需求描述
    实现用户注册时,在页面不跳转的情况下。提示用户输入的用户名是否已经存在。如果不存在显示正常状态;如果已经存在提示用户此用户名已经被占用。全程页面不能发生跳转。

  • 案例练习二 使用Ajax技术实现省市联动

    需求分析

    • 页面
    省份: -请选择 - 广东 湖南 湖北 四川
    城市: 
    
    
    
    
    • 需求分析

    实现用户选择了一个省份以后,动态从后台查询该省份有哪些地市。 用户只能选择该省份所属的地市。 全程页面无刷新

    js代码

    $(function() {
        //1。找到省份的元素
        $("#province").change(function() {
            //2. 一旦里面的值发生了改变,那么就去请求该省份的城市数据
            //$("#province").varl();
            var pid = $(this).val();
    
            /*[
            {
            "cname": "深圳",
            "id": 1,
            "pid": 1
            },
            {
            "cname": "东莞",
            "id": 2,
            "pid": 1
            }
            ...
            ]*/
            $.post( "CityServlet02",{pid:pid} ,function(data,status){
                //先清空
                $("#city").html(");
                //再遍历,追加
                $(data).each(function(index , c) {
                    $("#city").append("+c.cname)
                });
            },"json" );
    	});
    });
    
    

    总结

    Ajax

    * 创建请求对象
    
    * 发送get请求
    
    * 发送post请求
    
    

    JQuery

    发送get请求
    
    发送post请求
    
    

    服务器返回json数据

    你可能感兴趣的:(JavaWeb)

    用户名:
    密码
    邮箱
    简介