<!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&Jquery的Ajax技术&Json

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

  6. js原生Ajax(十四)

    一.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. [代码]JS原生Ajax,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. bitnami_redmine3.3.0-1 问题及备份恢复

    1. 服务不见了处理方法: 安装Bitnami Redmine之后,会生成5个与之相关的进程,分别是 redmineApache redmineMySQL redmineSubversion redm ...

  2. 性能测试 基于Python结合InfluxDB及Grafana图表实时采集Linux多主机或Docker容器性能数据

    基于Python结合InfluxDB及Grafana图表实时采集Linux多主机性能数据   by:授客 QQ:1033553122 实现功能 1 测试环境 1 环境搭建 3 使用前提 3 使用方法 ...

  3. Android为TV端助力 转载：Java 泛型

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...

  4. Android 组件的三种点击事件写法

    一.准备工作 1.项目结构 2.布局文件(activity_main.xml) <?xml version="1.0" encoding="utf-8"? ...

  5. Apktool（2）——使用前必须知道的apk知识

    这里拿testapp.apk为例,如下图所示,左图为直接解压apk得到的文件,右图为apktool反编译得到的文件(反编译的使用在下一篇重点介绍) 图1 解压apk和反编译apk得到的文件目录对比 一 ...

  6. （python）数据结构------列表

    一.数字的处理函数 (一)int() 取整数部分,与正负号无关,举例如下: print(int(-3.6), int(-2.5), int(-1.4)) print(int(3.6), int(2.5 ...

  7. 手把手教你全家桶之React(三)--完结篇

    前言 本篇主要是讲一些全家桶的优化与完善,基础功能上一篇已经讲得差不多了.直接开始: Source Maps 当javaScript抛出异常时,我们会很想知道它发生在哪个文件的哪一行.但是webpac ...

  8. Orchard详解--第六篇 CacheManager 2

    接上一篇,关于ICacheContextAccessor先看一下默认实现,用于保存一个获取上下文,且这个上下文是线程静态的: public class DefaultCacheContextAcces ...

  9. Spark Shuffle机制

    Spark Shuffle 一.HashShuffle 普通机制:产生磁盘小文件的数量为:M(map task number)*R(reduce task number) 过程: 1.map task ...

  10. 记一次坑爹的ORA-01152&ORA-01110错误

    最近做RMAN还原时遇到了一次非常坑爹的ORA-01152&ORA-01110错误.遇到的具体错误信息如下所示: RMAN> alter database open resetlogs; ...