zoukankan      html  css  js  c++  java
  • Ajax的两种实现方式

    //ajax的jquery实现
    function aclick(){
    //alert("測试一");
    var name = $("#userName").val();
    //alert(name);
    $.get("servlet/AjaxServlet?name=" + name ,null,back);
    }


    function back(data){
    //alert(data);
    $("#message").html(data);
    }




    //ajax的普通实现
    var xmlHttpRequest = null;   //javascript的浏览器内置对象,XMLHttpRequest对象是当今全部AJAX和Web 2.0应用程序的技术基础
    function ajaxRequest(){
    //alert("測试二");
    if(window.ActiveXObject) //IE浏览器,推断浏览器是否支持ActiveX控件
    {
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");   //创建XMLHttpRequest对象
    }else if(window.XMLHttpRequest) //除IE以外的其它浏览器
    {
    xmlHttpRequest = new XMLHttpRequest();
    }
    if(null != xmlHttpRequest)
    {
    var v1 = document.getElementById("userName").value;
    var v2 = document.getElementById("userName").value;

    //准备向server发出一个请求

    //get方式发出一个请求
    xmlHttpRequest.open("GET","servlet/AjaxServlet?name=" + v1, true);

    //post方式向server发出一个请求
    //xmlHttpRequest.open("POST", "AjaxServlet",true);

    //发生转台变换的时候调用回调函数
    xmlHttpRequest.onreadystatechange = ajaxCallBack;

    //使用post提交的时候 必须叫上例如以下代码
    //xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    //向server发出一个请求
    xmlHttpRequest.send("name="+v1+"&v2=" +v2);
    }
    }


    function ajaxCallBack(){
    if(xmlHttpRequest.readyState==4){
    //ReadyState取值 描写叙述 
    //0  描写叙述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象。可是还没有初始化。

     
    //1  描写叙述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法而且XMLHttpRequest已经准备好把一个请求发送到server。 
    //2  描写叙述一种"发送"状态。此时,已经通过send()方法把一个请求发送到server端,可是还没有收到一个响应。

     
    //3  描写叙述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,可是消息体部分还没有全然接收结束。

     
    //4  描写叙述一种"已载入"状态;此时,响应已经被全然接收。

     
    if(xmlHttpRequest.status==200){
    var content = xmlHttpRequest.responseText;
    document.getElementById("message").innerHTML = content;
    }
    }
    }

  • 相关阅读:
    vue中的样式
    v-model 双向数据绑定
    v-on 事件修饰符
    Linq Join
    Elasticsearch.Net 异常:[match] query doesn't support multiple fields, found [field] and [query]
    MongoDB开启权限认证
    elasticsearch备份与恢复
    elasticserach + kibana环境搭建
    Kibana TypeError : Object #<GlobalState> has no method 'setDefaults'
    匿名函数
  • 原文地址:https://www.cnblogs.com/llguanli/p/8455454.html
Copyright © 2011-2022 走看看