ajax

最新推荐文章于 2022-06-19 13:50:53 发布

serenysdfg

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量120

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/serenysdfg/article/details/82354544

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ajax技术的核心是XHR，用户单击后，可以不必刷新页面也能取得新数据，可以完全通过JS代码异步实现这一过程

XHR简介：

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应

http://www.cnblogs.com/xiaohuochai/p/6036475.html（XHR简介）

异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本/当响应就绪后对响应进行处理

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

实例

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ajax+asp/php
<body>
    <form action="">
        输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
    </form>
    <p>提示信息: <span id="txtHint"></span></p>

</body>
<script>
    function showHint(str)
    {
        if (str.length==0)
        { document.getElementById("txtHint").innerHTML=""; return;}
        var  xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function()
        { document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}
    }
    xmlhttp.open("POST","/try/ajax/gethint.php?q="+str,true);
    xmlhttp.send();
    }
</script>

实例

<body>
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>


</body>

<script>
    function loadXMLDoc()
    {
        if (window.XMLHttpRequest)
       {var xmlhttp=new XMLHttpRequest();//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行 }
        else
        {   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码   }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)

//console.log(xhr.responseText);
            { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }
        }
        xmlhttp.open("POST","ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
</script>


$.ajax({
  type: "post",//数据发送的方式（post 或者 get）
  url: "/admin/index",//要发送的后台地址

contentType:'text/html;charset=utf-8',
  data: {val1:"1",val2:"2"},//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
  dataType: "json",//后台处理后返回的数据格式
  success: function (data) {//ajax请求成功后触发的方法
    alert('请求成功');
  },
  error: function (msg) {//ajax请求失败后触发的方法
    alert(msg);//弹出错误信息
  }
});
});

请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

浏览器选择

下拉框参数
function AjaxSubmit(str) {
  var xmlhttp;
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}

如果URL要求带参数呢？
如果是get请求的话，将参数直接在url后面进行拼接。
例如：xmlhttp.open(“get”,”http://www.baidu.com?name=xiaosan“);
如果是post请求的话，则要进行多项设置操作：
例如：xmlhttp.open(“post”,”http://www.baidu.com“);
xmlhttp.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“name=xiaosan”);
其中，setRequestHeader(“label”,”value”)的作用是想要被发送的http报头添加lable/value对。
第四步：send（content）
发送请求。如果没有参数，则写成send(null)

serenysdfg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

异步 - True 或 False？AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：xmlhttp.open("GET","ajax_test.html",true);对于 web 开发人员...
复制链接

扫一扫

专栏目录