<!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. JAVA代码根据经纬度范围计算WGS84与谷歌全球墨卡托包含的切片数目与拼接图像像素尺寸

    根据项目需求编写的代码. 适用场景:在网络地图上,比如天地图与谷歌地图,用户用鼠标在地图上拉一个矩形框,希望下载该矩形框内某一层级的瓦片数据,并将所有瓦片拼接成一个完整的,包含地理坐标的tif图像. ...

  2. Python __exit__，__enter__函数with语句的组合应用

    __exit__,__enter__函数with语句的组合应用   by:授客 QQ:1033553122 简介 设计对象类时,我们可以为对象类新增两个方法,一个是__enter(self)__,一个 ...

  3. 环信easeui集成：坑总结2018

    环信EaseUI 集成,集成不做描述,看文档即可,下面主要谈一些对easeui的个性化需求修改. 该篇文章将解决的问题: 1.如何将App用户体系的用户名和用户头像 显示于环信的easeui 2.如何 ...

  4. Android为TV端助力 MediaPlayer的一些使用方法简历

    这里提供一些MediaPlayer的简单方法,方便以后熟练的使用它! 1)如何获得MediaPlayer实例: 可以使用直接new的方式: MediaPlayer mp = new MediaPlay ...

  5. VMware虚拟机CentOS7网络通信与无线上网

    实现主机和虚拟机网络通信 1.虚拟机设置 VMware界面最上面,选择[虚拟机]->[设置]:将网络连接改为"桥接模式",如下图所示: 2.CentOS7网络设置 自动获取I ...

  6. Spring入门详细教程（一）

    一.spring概述 Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring是于2003 年兴起的一个轻量级的 ...

  7. .net core系列之《.net core内置IOC容器ServiceCollection》

    一.IOC介绍 IOC:全名(Inversion of Control)-控制反转 IOC意味着我们将对象的创建控制权交给了外部容器,我们不管它是如何创建的,我们只需要知道,当我们想要某个实例时,我们 ...

  8. 在Lua中提示UnityEngine.dll的方法

    我的环境 安装最新的 EmmyLua-1.2.1及以上版本 IDEA 2017.1.2 及以上版本 关于EmmlyLua的介绍可查看我之前的文章:Lua代码提示和方法跳转 说明:本文方法摘自 Emmy ...

  9. shell的while和until 的用法

    shell while循环工作中使用的不多,一般适用于守护进程程序或始终循环执行场景,其他循环计算等. while条件句: 语法: while 条件 do 指令… done ok,我们测试一下: 测试 ...

  10. 了解 IP 地址，默认网关，子网掩码，DNS 的概念和作用。

    DNS(Domain Name System):域名解析服务器,在 Internet 上域名与 IP 地址一一对应,域名便于人记忆,但是机器只认识 IP 地址,他们之间的转换工作称为 ‘域名解析’,域 ...