<!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. [ CodeVS冲杯之路 ] P3116

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/3116/ 基础的高精度加法,注意一下两个数长短不一和答案第一位的处理即可,当然也可以用压位的方法做 #include&l ...

  2. 在Framework2.0环境下运行3.5的代码

    因为许多的服务器特别是廉价的服务器上使用的是Framework的v2.0.50727.再加上自己开发的算是产品,所以就需要降低一些客户的前期成本,而自己同时也喜欢简单的代码.后来查了下,得知其实Fra ...

  3. linux反汇编

    使用objdump参数可以: -a, --archive-headers    显示压缩头信息   -f, --file-headers       显示目录头总览   -p, --private-h ...

  4. V++ MFC CEdit输出数组 UNICODE TO ASCII码

    MFC怎么在静态编辑框中输出数组 //字符转ASCII码void CUTF8Dlg::OnBnClickedButtonCharAscii(){ // TODO: 在此添加控件通知处理程序代码 Upd ...

  5. Linux USB驱动框架分析【转】

    转自:http://blog.csdn.net/jeffade/article/details/7701431 Linux USB驱动框架分析(一) 初次接触和OS相关的设备驱动编写,感觉还挺有意思的 ...

  6. Codeforces 581F Zublicanes and Mumocrates（树型DP）

    题目链接  Round 322 Problem F 题意  给定一棵树,保证叶子结点个数为$2$(也就是度数为$1$的结点),现在要把所有的点染色(黑或白) 要求一半叶子结点的颜色为白,一半叶子结点的 ...

  7. hdu6040

    hdu6040 题意 将一个函数运行 n 次,一共得到 n 个值,有 m 次询问,每次询问第 k 小的值. 分析 考察了 \(nth\_element\) 函数的运用.\(nth\_element(a ...

  8. 分层图【p4822】[BJWC2012]冻结

    Description "我要成为魔法少女!" "那么,以灵魂为代价,你希望得到什么?" "我要将有关魔法和奇迹的一切,封印于卡片之中„„" ...

  9. 二分图变种之最小路径覆盖、最小点覆盖集【poj3041】【poj2060】

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=54859604 向大(hei)佬(e)势力学(di ...

  10. 【bzoj1087】【互不侵犯King】状压dp裸题（浅尝ACM-D）

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=54329606 向大(hei)佬(e)势力学(di ...