<script type="text/javascript">

    // Ajax固定的模版

    // 第一步:创建xhr对象,使用new关键字来调用内置的构造函数

    var xhr = new XMLHttpRequest();

    // 第二步:指定接收回来的内容。监听xhr

    // 对象的onreadystatechange事件,这个事件xhr对象的"就绪状态"改变的时候触发。我们只关心就绪状态为4的时候的事情;

    xhr.onreadystatechange = function(){

        if( xhr.readyState == 4 ){

            // 接收完文件要做的事情,让txt文本中的内容读取出来

            document.getElementById("info").innerHTML = xhr.responseText;

        }

    };

    // 第三步,创建哪一个请求,第一个参数请求是类型是get或post,第二个参数是请求的路径,第三个参数:是否是异步的机制;一定是true;

    xhr.open("get","test.txt",true);

    // 第四步:发送请求,圆括号内是请求的内容,get请求没有报文体写null;

    xhr.send(null);

</script>

原生的Ajax的实现的更多相关文章

  1. 使用XMLHttpRequest对象完成原生的AJAX请求

    1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...

  2. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  3. js原生的Ajax

    js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原 生的Ajax完成异步操作,有如下几个步骤: 1)创建Ajax引擎对象 2)为Ajax引擎对象绑定监听(监听服务器已 ...

  4. 原生javascript Ajax

    代码 1. IE5 ,IE6 使用ActiveXObject对象,   其余现代浏览器都支持XMLHttpRequest对象: function ajaxObject(){ var xmlhttp; ...

  5. 原生的AJAX写法,可以直接复制过来套用

    方法一: function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针 ...

  6. Ajax_简介: 异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template

    AJAX Asynchronous JavaScript And XML 通过 AJAX 可以在 浏览器中向 服务器 发送异步请求 一种 使用现有标准的 新方法,而非新语言 XML  可扩展标记语言 ...

  7. 原生javascript AJAX 三级联动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  9. 原生实现ajax解析--XMLHttpRequest

    ajax基础: Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求. 如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit ...

  10. 原生的ajax请求

    原生ajax请求的步骤: get 请求: 1,创建一个xhr变量 var xhr=new XMhttpRequest(); 2,设置请求方式和请求地址 xhr.open('url','http//19 ...

随机推荐

  1. HourRank 20

    第一题略 第二题组合数学 s1 = min(cnt['a'],cnt['b']), s2 = min(cnt['c'],cnt['d']), b1 = max(cnt['a'],cnt['b']), ...

  2. (HTTPS)-tomcat 实现 https 登录,去掉端口号

    最近项目组要给日本客户做个产品,升级服务器交由我来升级.为了测试用,想要在自己电脑上搭个服务器. 服务器需要由https登录,并且不显示端口号. 费了些劲儿,看了n多帖子,好不容易弄好了.趁在没忘记之 ...

  3. 使用PostProcessBuild设定Unity产生的Xcode Project

    简单来说就是unity提供一套api去修改xcode项目工程配置以及修改plist文件内容(当unity build结束后, 会自动回调OnPostProcessBuild). 以下是一些用到的配置处 ...

  4. laravel实现多数据库连接配置

    只需三步,便可实现. 第一步,在.env文件中配置 DB_HOST=localhost DB_DATABASE=test DB_USERNAME=root DB_PASSWORD=root DB_HO ...

  5. sparklyr包:实现Spark与R的接口

    日前,Rstudio公司发布了sparklyr包.该包具有以下几个功能: 实现R与Spark的连接—sparklyr包提供了一个完整的dplyr后端 筛选并聚合Spark数据集,接着在R中实现分析与可 ...

  6. java基础之位运算

    java中常见的位运算符:&(逻辑与) |(逻辑或) ~(取反) ^(逻辑异或) >>(右移) <<(左移) >>>(无符号右移) &(逻辑与 ...

  7. poi合并单元格同时导出excel

    poi合并单元格同时导出excel POI进行跨行需要用到对象HSSFSheet对象,现在就当我们程序已经定义了一个HSSFSheet对象sheet. 跨第1行第1个到第2个单元格的操作为 sheet ...

  8. js添加多个样式属性cssText

    document.getElementById("box").style.cssText += ";color:red;font-size:20px"; 代码分 ...

  9. 关于Atlassian无法注册的问题,请看过来

    好多童鞋在用团队构建工具git的时候,必然用到git的可视化工具sourceTree来管理项目一些操作,那么当我们下载完sourTree的时候,会有一个选择,已有账户登录还是免费账户,免费账户只有三十 ...

  10. C#基础 Dictionary存储自定义对象作为键值

    程序每次向容器Dictionary中插入数据时,都会判断Key值是否已经存在,如果不存在,则插入.否则抛出异常.那么Dictionary又是如何判断Key值是否存在的呢? 请看下面的代码:   cla ...