<!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. 20.Odoo产品分析 (三) – 人力资源板块(1) – 员工目录(1)

    查看Odoo产品分析系列--目录 人力资源指在一个国家或地区中,处于劳动年龄.未到劳动年龄和超过劳动年龄但具有劳动能力的人口之和.狭义讲就是企事业单位独立的经营团体所需人员具备的能力(资源).(解释来 ...

  2. LockSupport的源码实现原理以及应用

    一.为什么使用LockSupport类 如果只是LockSupport在使用起来比Object的wait/notify简单, 那还真没必要专门讲解下LockSupport.最主要的是灵活性. 上边的例 ...

  3. MySQL 在Windows平台上的安装及实例多开

    MySQL在Windows平台上的安装及实例多开   by:授客 QQ:1033553122 测试环境 Win7 64 mysql-5.7.20-winx64.zip 下载地址: https://cd ...

  4. 「破解」Xposed强

    「破解」Xposed强 Hook Hook Hook! 两张图片,第一张是我的微信截图,第二张是我从微信Hook出的一些类名. 一段代码,Hook这些类名出来的源码. 知道这些我们能干嘛,当然是分析( ...

  5. (网页)angularJs中怎么模拟jQuery中的this？(转)

    转载自mini_fan博客园: 今天想在Angular项目中使用jQuery的this功能,发现undefined.代码如下: HTML部分: <p ng-click="testCli ...

  6. sublime使用Package Control不能正常使用的解决办法

    标签: Sublime作为一款非常优秀的编辑器,套用中学语文课本里一篇讲梁启超的文章里形容梁启超的一句话,就是“短小精悍”.说它“短小”,是因为它的轻量级:说它“精悍”,则得益于它那包罗万象以适用于任 ...

  7. Scala并发编程【快速入门】

    1.简介 Scala的actor提供了一种基于事件的轻量级线程.只要使用scala.actors.Actor伴生对象的actor()方法,就可以创建一个actor.它接受一个函数值/闭包做参数,一创建 ...

  8. spring4笔记----Spring几种常用的容器后处理器

    PropertyPlaceholderConfigurer  属性占位符配置器 PropertyOverrideConfigureer    重写占位符配置器 CustomAutowireConfig ...

  9. How to monitor tempdb in MS SQL

    Error: tempdb is full due to active_transaction. select ss.[host_name], ss.login_name, ss.original_l ...

  10. C# WINFORM 应用程序动态读写xml config文件,获取数

    在实际项目里,我们需要用一个应用程序去连接多个数据库,有的进行测试,有的是数据库基本结构相同,数据不同, 我们不可能总去程序的连接字符串里去修改,更不能让用户去修改,所以需要动态去修改连接数据库配置信 ...