<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>JavaScript AJAX原生写法 面试题</title>

    </head>

    <body>

        <script type="text/javascript">

            var Ajax = {

                get: function(url, fn) {

                    //创建XMLHttpRequest对象

                    var xhr = new XMLHttpRequest();

                    //true表示异步

                    xhr.open('GET', url, true);

                    xhr.onreadystatechange = function() {

                        // readyState == 4说明请求已完成

                        if(xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {

                            //responseText：从服务器获得数据

                            fn.call(this, xhr.responseText);

                        }

                    };

                    xhr.send();

                },

                post: function(url, data, fn) { //datat应为'a=a1&b=b1'这种字符串格式

                    var xhr = new XMLHttpRequest();

                    xhr.open("POST", url, true);

                    // 添加http头，发送信息至服务器时内容编码类型

                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                    xhr.onreadystatechange = function() {

                        if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {

                            fn.call(this, xhr.responseText);

                        }

                    };

                    xhr.send(data);

                }

            }

        </script>

    </body>

</html>

JavaScript AJAX原生写法的更多相关文章

  1. Ajax原生写法

    用太久JQuery了,别忘了Ajax原生是怎么写的 var Ajax = { get : function (url, callback) { var req = Ajax.getRequest(ca ...

  2. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  3. ajax的jquery写法和原生写法

    一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指: ...

  4. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  5. javascript实现原生ajax

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  6. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  7. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  8. 2、.net NVelocity中原生javascript ajax封装使用

    在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...

  9. JavaScript Ajax之美~

    JavaScript Ajax之美~ 曾经有一段时期,因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期,不被大家看好,后来,到了2005年,Google公司的很多技术都是用了aj ...

随机推荐

  1. 创建型设计模式之建造者模式(Builder)

    结构 意图 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 适用性 当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式时. 当构造过程必须允许被构造的对象有不 ...

  2. 【问题帖】压缩图片大小至指定Kb以下

    像PS,QQ影像等都有该功能,将图片大小压缩至指定kb以下. 我也来山寨一把,到目前为止,控制图片的大小,平时的解决方案通过分辨率和质量来控制的. 假定最后压缩的大小是100kb,那么在保证不大于10 ...

  3. 64位操作系统安装32位客户端和PL/SQL

    PL/SQ只能使用32位的Oracle客户端.在64位系统下安装了64位的oracle 11g,使用PL/SQL需再安装32位Oracle客户端. 按以下方法试验成功: 1)安装32位的Oracle客 ...

  4. Secret Cow code(USACO)

    题目描述:zxyer为了防止他的标程被别人抄走,他在计算机中的rar文件上设置了一个密码,其中每一个密码都有一个初始字符串,字符串由大写字母组成,且长度不超过30位,每一个密码还有一个询问,询问为一个 ...

  5. cookie登录

    #coding:utf-8 import tornado.httpserver import tornado.ioloop import tornado.options import tornado. ...

  6. linux进程地址空间--vma的基本操作【转】

    转自:http://blog.csdn.net/vanbreaker/article/details/7855007 版权声明:本文为博主原创文章,未经博主允许不得转载. 在32位的系统上,线性地址空 ...

  7. HTML5 canvas上画文字出现乱码

    不是这个的问题, <html> <head> <meta charset="utf-8"/> </head> 是因为从网上复制粘贴下 ...

  8. 读取文本文件时<U+FEFF> 导致的奇怪问题

    项目中经常会从一些文本文件中读取数据进行业务处理,最近遇到一个问题,另外一个部门提供一个txt文本给我们进行业务处理,当我们使用字符流读取文本之后,处理时,发现第一行数据无法匹配,其他数据可以正常处理 ...

  9. windows 中使用hbase 异常：java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.

    平时一般是在windows环境下进行开发,在windows 环境下操作hbase可能会出现异常(java.io.IOException: Could not locate executable nul ...

  10. [BZOJ1051][HAOI2006] 受欢迎的牛 tarjan求联通分量

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5687  Solved: 3016[Submit][Sta ...