JavaWEB（AJAX快速入门）

哈喽~~又是我~~今天给大家分享的是AJAX快速入坑~~~~

1.JSON使用
    对象字符串，满足定义规则的字符串。
    1.1 前端JSON格式字符串的转换使用
    JavaScript——JSON.stringify(o);JSON.parse(jsonStr);
    jQuery——$.parseJSON

    1.2 后端JSON格式字符串的转换使用
    jackJSON
    fastJSON

2.异步与同步
    2.1 同步
    一个人同一时间只能做一件事情，只有一件事情做完，才能做另一件事情。
    2.2 异步
    一个人事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头做之前未完成的事情。

3.jQuery之AJAX使用

    原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本），而jQuery将这些复杂的业务逻辑进行封装处理，使用非常简单。

    3.1 概述
    Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML
    核心：Ajax就是能够做到局部刷新！
    3.2 方法
    ** ajax()
    ** get()
    ** post()

    3.3 语法
    $.ajax({          
                url:"发送请求（提交或读取数据）的地址", 
                dataType:"预期服务器返回数据的类型",  
                type:"请求方式", 
                async:"true/false",
                data:{发送到/读取后台（服务器）的数据},
                 success:function(data){请求成功时执行},      
                 error:function(){请求失败时执行}
    });

    $.post(url, [data], [callback], [type]);

    $.get(url, [data], [callback], [type]);

Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，
服务端返回小部分数据，然后更新客户端的部分页面。

json是Ajax发送小部分数据的一种轻量级数据格式，可以简单易懂的给服务器或者浏览器交互数据，包括json对象，json数组对象。

一、jquery.ajax()
jquery 库中已经封装了ajax请求的方法。

jquery.ajax([settings])。发请求并且能得知成功还是失败。

type:类型，"POST"或者"GET"，默认是"GET"。
url:发送请求的地址。
data：是一个对象，连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json"。
success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。
jquery初始化。

jQuery---Ajax简介

Ajax是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现对部分网页的更新。

1.什么是Ajax？
--Asynchronous JavaScript and XML  --异步的JavaScript和XML

--使用ajax的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

2.jQuery提供多个与ajax有关的方法

--$.ajax()方法：
    返回其创建的 XMLHttpRequest 对象。

常用参数：
    url:一个用来包含发送请求的URL字符串。

    data：发送到服务器的数据。

    dataType：预期服务器返回的数据类型。

    success：请求成功后的回调函数。参数：由服务器返回
    
    type：(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。

【例如】

$.ajax({
            type:"post",
            dataType:"text",
            url:"hello.do",
            data:"sname="+sname,
            success:function(data){
                $("#sid").html(data);
            }
        });

------------------------------------------------------------------------------------------------------------
【案例1】用户注册  失去焦点时，判断是否成功。
1.编写html代码

<input type = "text" id = "sname" onblur = "myf(this.value);" /><span id = "sid"></span><br/>
<input type = "text" id = "spwd" />

2.引入jQuery库，编写js代码

function myf(sname){
        //alert(sname);
        
        $.ajax({
            type:"post",
            dataType:"text",
            url:"hello",
            data:"sname="+sname,
            success:function(data){
                $("#sid").html(data);
            }
        });
        
    }

3.编写servlet

request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        
        String sname = request.getParameter("sname");
        
        String str ="ok";
        if("admin".equals(sname)) {
            str = "no";
        }
        
        PrintWriter out = response.getWriter();
        out.print(str);
        out.flush();
        out.close();

 

今天的分享就到这啦~~~我们下次再见~··