面试时怎样回答:你对原生ajax的理解

很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax。

首先,jq的ajax:一般我常用的参数就是这些,不过可以配置的参数不止这些

$.ajax({
    url:‘‘,//请求文件路径
    type:‘‘,//请求方式GET POST
    data:{},//要发给服务器的数据参数
    dataType:‘‘,//希望接口返回的数据格式json,string等等
    success:function(){
        // 请求成功的回调
    },
    error:function(){
        // 请求失败的回调
    }
})

接下来,jq毕竟只是一个类库,原生js还是要弄清楚的,那原生的ajax怎么写呢:

一个ajax的请求可以形象的比喻为一次打电话的过程:

//1 拿出手机        创建XMLHttpRequest对象
//2 拨号            连接到服务器
//3 说话            发送请求
//4 等待对方回应     服务器响应请求

//1 拿出手机        创建XMLHttpRequest对象
if(window.XMLHttpRequest){
    var OAjax = new XMLHttpRequest()
}else{
    // 兼容ie6及以下写法
    var OAjax = new ActiveXObject("Misrcsoft.XMLHTTP")
}
//2 拨号            连接到服务器
OAjax.open(‘GET‘,‘a.html?t="new Date().getTime()"‘,‘true‘);//请求方式,请求路径,t为了消除缓存,是否异步
//3 说话            发送请求
OAjax.send();
//4 等待对方回应     服务器响应请求
OAjax.onreadystatechange = function(){
    //OAjax.readyState,监听浏览器和服务器之间的交互到哪一步了
        // 0->未初始化,还没有调用open方法
        // 1->载入,已调用send()方法,正在发送请求
        // 2->载入完成,send()方法已完成,已收到全部响应内容
        // 3->解析,解析响应的内容
        // 4->完成,相应内容解析完成,可以在客户端调用
    if(OAjax.readyState == 4){
        if(OAjax.status == 200){
            // 请求a.html成功,responseText为服务器响应的内容
            console.log(‘ajax请求成功‘,OAjax.responseText);

        }else{
            // 状态不为200
            console.log(‘ajax请求失败‘);

        }
    }
}

原文地址:https://www.cnblogs.com/1463069300limingzhi/p/10850002.html

时间: 2024-10-01 23:10:30

面试时怎样回答:你对原生ajax的理解的相关文章

面试整理(1):原生ajax

接到电话面试,有一些送分题答的不好,在这里整理一下 问题:原生ajax的工作流程是怎么样的? 老用封装好的工具,原生的ajax其实并不熟悉,今天复习一下.主要参考http://www.w3school.com.cn/ajax/ 要发一个ajax请求首先要创建XMLHttp对象 var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") 其中,new

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

原生Ajax实现异步通信

昨天我们用JQuery.Ajax讲解了JQuery如何通过Ajax实现异步通信,为了更好的编织知识网,今天我们用一个Demo演示如何用javascript实现原生Ajax的异步通信. 原生Ajax实现异步通信分为以下5步: 1.创建XMLHttpRequest对象: 2.注册回调方法: 3.设置和服务器端交互的参数 4.设置向服务器端发送的数据,启动和服务器端的交互: 5.写回调方法 有了这5步的思想指导,下面我们开始设计实现过程. 首先我们新建一个html页面,用于和用户交互,代码如下: <!

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

JavaWEB小知识学习--原生AJAX

AJAX的作用局部刷新,作为提升页面体验还是很重要的,不过大家都说对SEO不是很友好,一直使用jQuery封装的AJAX,没有了解过原生的是什么样子的,特此学习下,补充知识 1.原生AJAX的Get方式 页面中定义一个a标签.想要实现的效果点击a标签,能够请求服务器,弹出服务器返回的字段 <body> <a href="/ajaxTest">点击我!</a> </body> 对应的AJAX请求如下,注释步骤很详细的 //具体的函数可以参考

原生 ajax

1.创建XMLHttpRequest对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 2.发送请求 var xmlhttp;if (wi

javascript实现原生ajax的几种方法

自从js有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法. 首先实现ajax之前必须要创建一个 XMLHttpRequest 对象的.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: var xmlHttp; function createxmlHttpReques