• AJAX


    1、AJAX= 异步 JavaScript 和 XML。实现不加载新页面的前提下更新页面。

    2、工作原理:

     

      浏览器首先触发事件,创建一个XMLHttpRequest对象,发送Http请求,通过网络到达服务器,服务器处理Http请求,然后创建一个回复发送数据到浏览器,通过网络回到浏览器,浏览器利用JavaScript处理返回的数据,更新页面文本。

    3、AJAX的基础就是XMLHttpRequest(XHR),XMLHttpRequest用于在后台与服务器进行数据传递,因此无需再次加载新的页面

      【1】、创建XMLHttpRequest对象

        浏览器会在内部自己创建XMLHttpRequest对象。

    variable=new XMLHttpRequest();

      【2】、向服务器发送请求

        如果需要向服务器发送请求,可以使用open和send方法。

        XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

    xmlhttp.open("GET","ajax_info.txt",true);//(方式,url,是否使用异步async参数)
    xmlhttp.send();

      【3】、服务器相应

    如果是XML格式的就用responseXML

     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    4、以上是AJAX本本身的技术,jquery中有.ajax()方法,可以更简单的使用ajax技术进行前后端数据的异步传输。

      其中重要的参数有:

        1、url:指前端数据向后端传输的后端接收地址

        2、date:指前端向后端传送的数据

        3、type:指前端向后端传输的method(post和get)

        4、dateType:指后端向前端传返回值的数据类型(text    text josn等)

        5、success:通常里面是一个函数function(date){},data为返回的数据,在方法体内写如何处理返回值。

    实例:

    前端:

    var url = "/test/check";
        $.ajax({
            type: "post",
            url: url,
    //      data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
            data: {"para":1},//json类型
            cache: false,
            async : false,
            dataType: "json",
            success: function (data ,textStatus, jqXHR)
            {
                if("true"==data.flag){
                   alert("合法!");
                    return true;
                }else{
                    alert("不合法!错误信息如下:"+data.errorMsg);
                    return false;
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {      
                alert("请求失败!");
            }
         });

    后端:

    /**
         * 校验
         *
         * @return void
         */
        public void check(){
            Map<String,String> result = new HashMap<String,String>();//使用hashmap来接收json对
            boolean flag = false;
            try{
                String para= getPara("para");//在servlet中使用reqest.getparameter("para")方法来获取前端参数。
       
          //校验 代码...
                result.put("flag", "true");
                renderJson(result);//返回json数据
            }catch(Exception e){
                result.put("flag", flag+"");
                result.put("errorMsg", e.getMessage());
                renderJson(result);//返回json数据
                e.printStackTrace();
            }
        }

     使用servlet的话,后端这样响应:

    List<Map<String,Object>> list = bo.selectData();
    response.setContentType("application/json;charset=GBK");
    PrintWriter out=response.getWriter();       
    out.write(JSONArray.fromObject(list).toString());//使用alibaba的fastjson的话用JSON.tojson()方法
    out.flush();
    out.close();
  • 相关阅读:
    Fescar Quick Start
    Fescar Example-Spring Cloud
    IntelliJ IDEA 如何生成时序图?
    git 出现 fatal: refusing to merge unrelated histories 错误
    蘑菇街支付架构 PDF 下载
    优点缺点
    转 CentOS下php安装mcrypt扩展
    转 安装php时报gd相关的错误(gd_ctx.c)
    转 安装PHP出现make: *** [sapi/cli/php] Error 1 解决办法
    转 CentOS开启FTP及配置用户
  • 原文地址:https://www.cnblogs.com/television/p/8640881.html
Copyright © 2020-2023  润新知