js 原生ajax实现

时间：2021-09-10 11:03:28
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

    <input type="text" id="txt1" value="1212" />

    <script>

        var obj = document.getElementById('txt1');

        console.log(obj.value);

        var xmlHttp;

        if (window.XMLHttpRequest) {

            xmlHttp = new XMLHttpRequest();

        } else {

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        xmlHttp.onreadystatechange = function () {

            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                console.log(1);

                obj.value = xmlHttp.responseText;

            }

        };

        xmlHttp.open('get', 'json1.json', true);   // true 异步 false 同步        url:   aaa.asp?a=1&b=2

        xmlHttp.send();   //send('11111'). 当post的时候提交 '11111'

        console.log(2);

        //xmlhttp.open("POST", "ajax_test.asp", true);

        //xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //xmlhttp.send("fname=Bill&lname=Gates");

        //当为true，打出顺序为  2  1

        //当为false，打出顺序为 1  2

    </script>

</body>

</html>

教程地址：http://www.w3school.com.cn/ajax/index.asp

js 原生ajax实现的更多相关文章

  1. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  2. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  3. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

  4. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  5. JS原生Ajax&amp&semi;Jquery的Ajax技术&amp&semi;Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  6. js原生Ajax&lpar;十四&rpar;

    一.XMLHttpRequest    [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...

  7. Jquery学习笔记 --ajax删除用户，使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

  8. &lbrack;代码&rsqb;JS原生Ajax&comma;GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ ...

  9. Jquery学习笔记（10）--ajax删除用户，使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: <!DOCTYPE html> <html lang=&quo ...

  10. js 原生 ajax

    //js ajax function Ajax(url,type,data,comFun,sucFun,errFun) { //1.创建XMLHttpRequest对象 var xmlHttpRequ ...

随机推荐

  1. 菜鸟教程之工具使用（十一）——Eclipse去掉未使用的引用

    大家在写代码的时候经常会看到如下的情况: 大家都知道这是因为引入了未使用的包,所以Eclipse给出了提示,告诉你这些是无用的引用,这些无用的引用即影响了美观,又增加了代码占用的空间,还给代码的编译增 ...

  2. Python 初学（一） 标识符

    Python 标识符 在python里,标识符由字母.数字.下划线组成: python中的标识符是区分大小写的: 1)以单下划线开头(_foo)的代表不能直接访问的类属性,需要通过类提供的接口进行访问 ...

  3. NENU&lowbar;CS&lowbar;segment&lowbar;tree

    单点更新 http://acm.hdu.edu.cn/showproblem.php?pid=1166 题意:单点更新加减,区间查询求和. #include<cstdio> #define ...

  4. iOS维码的生成和扫描

    iOS生成二维码(彩色 + 阴影) http://www.jianshu.com/p/85e131155b79?plg_nld=1&plg_uin=1&plg_auth=1&p ...

  5. Selenium 设置管理cookie，超时时间

    可以通过option设置管理cookie,超时时间 一.cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,储存在内存.而session机制采用的是在服 ...

  6. Jetty安装学习并展示

    Jetty 的基本架构 Jetty 眼下的是一个比較被看好的 Servlet 引擎,它的架构比較简单,也是一个可扩展性和很灵活的应用server,它有一个基本数据模型,这个数据模型就是 Handler ...

  7. 3&period;IP协议，ARP协议，RARP协议

    1.IP协议 IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输.要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制 ...

  8. C语言学习第四章

    今天学习C语言循环结构,为什么要用循环呢?因为有时候我们对一堆的数字进行重复的处理的时候要重复的编写一些相同或者差不多的代码,让程序显得很臃肿,而且写着也麻烦,如果用循环来写的话能简化很多,出错的话也 ...

  9. &lbrack;原创&rsqb;自动获取当前URL所属主域的JS方法（适合多级域名）

    工作中要用到,就随手写了个,不是什么难题,分享给有需要的朋友(主要是很久没更新博客了). 如果有特殊域名,比如“.tj.cn",请将".tj"加到hostExts数组中( ...

  10. RQNOJ 3 Jam的计数法

    一道模拟题,用的vector比用链表要方便很多,毕竟不需要自己写,因为是递增的,所以每一次你都要去检查最后一位加1之后有没有越界,如果没越界你就可以把他当前的字符删掉替换成他下一位的字符就可以了,如果 ...

相关文章