精华内容
下载资源
问答
  • 原生AJAX代码

    2016-11-21 18:36:20
    原声AJAX代码
    <html>
    <head>
    <script>
    var xmlhttp;
    function getNewXmlRequest(){
    //接收的数据,从服务器返回,如果返回对象在window成立
    if (window.XMLHttpRequest){
    //返回给对象赋值,IE7以上和主流浏览器使用
    xmlhttp=new XMLHttpRequest();
    //如果在服务器返回的数据不成立,
    }else{// code for IE6, IE5
    //给对象赋值为下,在IE7一下浏览器和普通无内核浏览器中使用
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    function cha(){
    var a = document.getElementById("sql").value;

    if(a.length==0){
    return false;
    }
    //根据浏览器生成的对象
    getNewXmlRequest();

    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    //获得某个标签的ID,让此标签的的innerhtml属性,赋值为后面得到的服务器返回结果,结果是声明的变量与后台交互得到的数据:xmlhttp.responseText
    //重要语句,必须的,没有这个语句,结果就无法响应
    document.getElementById("add_li").innerHTML=xmlhttp.responseText;
    }
    <!--document.getElementById("add_li").appendChild.innerHTML=xmlhttp.responseText;-->
    }
    //指定异步地址,提交方式,和传递的参数,
    xmlhttp.open("GET","addli.php?db="+a,true);
    //发送异步请求
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <input type="text" id="sql" οnkeyup="cha()" />
    <ul id="add_li">
    <li>查询结果</li>
    </ul>
    </body>
    </html>
    展开全文
  • 原生ajax代码

    千次阅读 2018-10-13 18:01:05
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"...//1、创建ajax对象  var xmlhttp;  if (window.XMLHttpRequest)  {  // IE7+...

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function loadXMLDoc()
    {

    //1、创建ajax对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

    //2、监听状态的变化
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }

    //3、打开连接
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//true代表支持异步执行,false为否

    //4、发送请求
        xmlhttp.send();
    }
    </script>
    </head>
    <body>

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

    </body>
    </html>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 手写原生AJAX代码

    2020-10-15 11:23:57
    一步到位·手写原生AJAXAJAX 简史AJAX的定义AJAX使用的技术AJAX工作原理AJAX技术实现XMLHttpRequest的常用属性(具体就参考红宝书把)XMLHttpRequest的常用方法编写AJAX代码 手写AJAX的代码,我们也需要知道,到底...


    手写AJAX的代码,我们也需要知道,到底什么是AJAX,以及为什么可以实现数据的通信,是基于哪些原理?

    AJAX 简史

    AJAX的定义

    • AJAX的全称就是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
    • AJAX就是与服务器进行数据通信并且在不刷新网页的前提下更新渲染数据,这就是异步体现

    AJAX使用的技术

    • 使用CSS和HTML所表示(毕竟是展示在网页端)
    • 使用DOM模型进行数据交互和展示
    • 使用XMLHttpRequest来和服务器进行异步通信
    • 使用JavaScript实现方法的绑定以及实现
    1. AJAX 的核心是 XMLHttpRequest 对象。

    2. 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

    IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象

    AJAX工作原理

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

    AJAX技术实现

    XMLHttpRequest的常用属性(具体就参考红宝书把)

    1. onreadystatechange 属性
      onreadystatechange属性也就是一个事件响应了,从字面上也可以看出,是处理服务器相应的事件,所以里面存有处理服务器响应的函数。
    
    xmlHttp.onreadystatechange = function() {
        //我们需要在这写一些代码
    }
    
    1. readyState 属性
      readyState存有服务器的响应状态,每当readyState发生改变的时候,onreadystatechange函数就会被执行,状态码以及描述如下:

    0 请求未初始化(在调用 open() 之前)
    1 请求已提出(调用 send() 之前)
    2 请求已发送(这里通常可以从响应得到内容头部)
    3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
    4 请求已完成(可以访问服务器响应并使用它)

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            //从服务器的response获得数据,具体操作在这里
        }
    }
    
    1. responseText 属性
      可以通过 responseText 属性来取回由服务器返回的数据。
      在我们的代码中,我们将把时间文本框的值设置为等于 responseText:
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            document.myForm.time.value = xmlHttp.responseText;
        }
    }
    

    其他属性及描述见下表
    属性描述大全?

    XMLHttpRequest的常用方法

    1. open()方法
      open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL,第三个参数规定应当对请求进行异步地处理。
      xmlHttp.open("GET","test.php",true);
      这里【true】表示需要进行异步处理
    2. send()方法
      send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录,那么代码是这样的:
      xmlHttp.send(null);
      也就是说,open()方法是对服务端,而send()是对客户端。其他方法如下图
      方法大全?

    编写AJAX代码

    大体的步骤就是以下四点,万变不离其宗,只是内部的逻辑会根据业务需求而变化

    1. 创建XMLHttpRequest对象。
    2. 设置请求方式。
    3. 调用回调函数。
    4. 发送请求。
    
    • 创建对象
      var xmlHttp=new XMLHttpRequest();
      但是如果是IE5或者IE6浏览器,则使用ActiveX对象,创建方法是:
      var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      所以最后也是最好的写法就是:
    var xmlHttp;
    if (window.XMLHttpRequest) {            //非IE
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {       //IE
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    
    • 设置请求方式
      如何设置请求方式呢?open()就可以用来设置请求方式。
      xmlHttp.open("POST", url, true);
    • 调用回调函数
      如果在上一步中open方法的第三个参数选择的是true,那么当前就是异步请求,这个时候需要写一个回调函数,XMLHttpRequest对象有一个onreadystatechange属性,这个属性返回的是一个匿名的方法,所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数,就是请求在后台处理完,再返回到前台所实现的功能。在这个例子里,我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据,然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的,所以在回调函数中首先要判断后台返回的信息是否正确,如果正确才可以继续执行。代码如下:
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                var obj = document.getElementById(id);
                obj.innerHTML = xmlHttp.responseText;
            } else {
                alert("AJAX服务器返回错误!");
            }
        }
    }
    

    xmlHttp.readyState是存有XMLHttpRequest 的状态,xmlHttp.status是服务器返回的结果
    AJAX状态值与状态码区别

    1. AJAX状态值是指,运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤。如:正在发送,正在响应等,由AJAX对象与服务器交互时所得;使用“ajax.readyState”获得。(由数字1~4单位数字组成)
    2. AJAX状态码是指,无论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,该信息使用“ajax.status”所获得;(由数字1XX,2XX三位数字组成,详细查看RFC)
      这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因。
    • 发送请求
    var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();         // 增加time随机参数,防止读取缓存 				
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");                     // 向请求添加 HTTP 头,POST如果有数据一定加加!!!!
    xmlHttp.send(params);
    

    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。

    展开全文
  • js原生Ajax代码

    2020-02-26 14:26:29
    var Ajax = { get: function(url,fn){ // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr=new XMLHttpRequest(); xhr.open('GET',url,false); xhr.onreadystatechange=function(){ ...
    var Ajax = {
        get: function(url,fn){
            // XMLHttpRequest对象用于在后台与服务器交换数据
            var xhr=new XMLHttpRequest();
            xhr.open('GET',url,false);
            xhr.onreadystatechange=function(){
                // readyState == 4说明请求已完成
                if(xhr.readyState==4){
                    if(xhr.status==200 || xhr.status==304){
                        console.log(xhr.responseText);
                        fn.call(xhr.responseText);
                    }
                }
            }
            xhr.send();
        },
    
        // data应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
        post: function(url,data,fn){
            var xhr=new XMLHttpRequest();
            xhr.open('POST',url,false);
            // 添加http头,发送信息至服务器时内容编码类型
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4){
                    if (xhr.status==200 || xhr.status==304){
                        // console.log(xhr.responseText);
                        fn.call(xhr.responseText);
                    }
                }
            }
            xhr.send(data);
        }
    }
    
    展开全文
  • ajax简介+原生ajax代码

    2019-09-22 18:16:17
    Ajax(Asynchronous Javascript And XML),翻译过来就是异步Javascript和XML;是一种在网页上与服务器进行交互的技术。它异步交互的特性,能够在不刷新页面的情况下,对服务器发出请求并获取数据,再利用js处理数据,...
  • 原生ajax代码笔记

    2016-07-26 21:05:00
    这个练习就是用原生ajax获取本地服务器的一个简单的php的返回信息,将返回信息装上id为mydiv的元素上面。 js代码如下: //XHR构造函数 function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ ...
  • 原生Ajax代码实现

    2019-10-07 07:36:01
    Ajax Asynchronous JavaScript And XML 异步: 指一段程序执行时不会阻塞其他程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序 ,相反的则为同步, 自己理解的就是类似百度的搜索框输入内容时的...
  • 主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 原生ajax

    2019-06-05 10:00:37
    原生ajax代码 function(url, data, fn) { // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr= null; if(window.XMLHttpRequest){ xhr= new XMLHttpRequest(); }else{ xhr= new ...
  • JS原生Ajax和jQuery的Ajax与代码示例

    万次阅读 多人点赞 2018-08-26 20:38:57
    JS原生Ajax和jQuery的Ajax 【学习目标】 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json的解析方式 3,掌握jQuery中的Ajax封装 4,使用Ajax实现特效 实现异步验证用户名是否存在 ...
  • 一、前端html页面编写 ajax的测试 ...二、原生ajax的js写法 var xmlHttp; window.onload = function() { // 监听用户名失去焦点事件 var usernameEle = document.getElementById("username");
  • 原生ajax实现代码

    2014-10-09 21:20:00
    //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) { //Mozilla 浏览器 ajax = new XMLHttpRequest(); if (ajax.overrideMimeType) { //设置MiME类别 ...
  • JS原生Ajax和jQuery的Ajax与代码示例 2018-08-26 20:38:57苏凯勇往直前阅读数 17250更多 JS原生Ajax和jQuery的Ajax 【学习目标】 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json...
  • 原生ajax处理json格式数据代码实例: 由于jQuery的出现,原生ajax使用频率也越来越少,这当然是因为jQuery的便利性多导致的。 但是对于原生ajax实现原理的知晓也是非常重要的,下面就改造本板块的一个使用jquery ajax...
  • 原生ajax使用

    2018-11-29 10:30:50
    代码原生ajax使用demo,详情请查看博客 原生Ajax使用笔记
  • AJAX原生代码

    2017-10-18 19:01:55
    1.使用原生AJAX //onblur="userValidate(this)"关联一个事件 ...2.编写AJAX原生代码 var xhr //1.创建XMLHttpRequest对象的函数 function getXMLHttpRequest(){ if(window.XMLHttpRequest){ return new
  • 原生Ajax代码实现及状态码总结

    千次阅读 2017-03-05 17:28:42
    一,原生Ajax代码实现: 1:主要分四个步骤: 1) 定义XMLHttpRequest对象 2) 与服务器建立连接 4) 接受来自服务器的信息并处理 2:代码: 3) 发送请求    ajax...
  • 本博文就原生Ajax进行解析和代码展示, 2 Ajax 创建XMLHttpRequest对象; 注意兼容 注册回调函数,在XMLHttpRequest中设置要发送的请求,利用的是open(first,second,third)方法 1)param first:...
  • GitHub源码下载地址:... 前端原生ajax发请求的代码,通过xmlhttp的方法操作,重点全在代码注释里。 有post和get两种方法, <script> setTimeout('CommentAll()', 5000); var xmlHttp =...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,333
精华内容 533
关键字:

原生ajax代码