zoukankan      html  css  js  c++  java
  • Ajax

    Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面

      它的属性有:

        onreadystatechange  每次状态改变所触发事件的事件处理程序。

        responseText     从服务器进程返回数据的字符串形式。

        responseXML    从服务器进程返回的DOM兼容的文档数据对象。

        status           从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

        status Text       伴随状态码的字符串信息

        readyState       对象状态值

        0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

        1 (初始化) 对象已建立,尚未调用send方法

        2 (发送数据) send方法已调用,但是当前的状态及http头未知

        3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,

        4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

      但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

    Ajax原生写法创建xmlhttprequest对象

    function oldAjax() {
    //1.发送ajax请求
    var xhr=null;
    if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
    }else{
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //01.能准备发送请求的方式目标地址是否异步 true 异步
    xhr.open("post","/FirstServlet",true);
    xhr.onreadystatechange=function () {
    if(xhr.readyState==4 && xhr.status==200){ //认为请求已经成功发送,并且客户端浏览器已经成功获取到服务器响应的数据
    //一个系统对象的属性,获取到响应回来的文本
    var data=xhr.responseText;
    // alert(data);
    $("#msg").html(data);
    }
    };
    //请求中必须有Content-Type
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("uname="+$("[name=uname]").val());
    }

     getWriter().write()返回响应给客户端 

    简便写法

    function newAjax() {
    $.ajax({
    url:"/FirstServlet",
    type:"POST",
    data:{"uname":$("[name=uname]").val()},
    async:true,
    success:function (data) {
    $("#msg").html(data);
    }
    });
    }


    Ajax get请求写法
    .get('/FirstServlet',{"uname":$("[name=uname]").val()},function (data) {
    $("#msg").html(data);
    });
    post请求
    $.post('/FirstServlet',{"uname":$("[name=uname]").val()},function (data) {
    $("#msg").html(data);
    });

    getJSON方法
     $.get('/FirstServlet',{"uname":$("[name=uname]").val()},function (data) {
    alert(typeof data);
    $("#msg").html(data);
    });
    load方法
    $("#msg").load('/FirstServlet',{"uname":$("[name=uname]").val()});

    serialize方法
    var data=$.param($("#form1").serializeArray());




    
    
  • 相关阅读:
    mysql配置图解(mysql 5.5)
    C++中的enum
    vc6.0中的dsp,dsw,ncb,opt,clw,plg,aps等文件的简单说明
    using namespace std
    C#中Cache的使用 迎客
    数据库里的存储过程和事务有什么区别? 迎客
    WINDOWS远程默认端口3389的正确修改方式 迎客
    DES加密和解密PHP,Java,ObjectC统一的方法 迎客
    转:15点 老外聊iPhone游戏开发注意事项 迎客
    windows server 2003 删除默认共享 迎客
  • 原文地址:https://www.cnblogs.com/xuhaifeng017/p/7636031.html
Copyright © 2011-2022 走看看