Ajax常见面试题

合集下载

前端开发工程师面试题及答案

前端开发工程师面试题及答案

前端开发工程师面试题及答案在前端开发领域,面试是选拔优秀人才的重要环节。

以下是一些常见的前端开发工程师面试题以及对应的参考答案。

一、HTML 和 CSS 相关问题1、解释一下盒模型以及它在布局中的作用。

答案:盒模型是 CSS 中用于布局的基本概念,它由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

在布局中,理解盒模型对于准确计算元素的尺寸和间距非常重要,能够帮助我们实现各种复杂的页面布局。

2、如何实现一个两栏布局,左边固定宽度,右边自适应?答案:可以使用多种方法实现。

一种常见的方式是使用浮动(float),将左边栏设置为固定宽度并向左浮动,右边栏不浮动,并设置其左边的外边距(marginleft)为左边栏的宽度。

也可以使用 flex 布局,将父容器设置为 display: flex; ,左边栏设置固定宽度,右边栏设置flex: 1; 以实现自适应。

3、说一说 CSS 选择器的种类和优先级。

答案:CSS 选择器包括元素选择器、类选择器、id 选择器、属性选择器、伪类选择器、伪元素选择器等。

选择器的优先级从高到低依次为:内联样式(通过 style 属性设置)> id 选择器>类选择器、属性选择器、伪类选择器>元素选择器、伪元素选择器。

二、JavaScript 相关问题1、谈谈你对 JavaScript 中作用域和闭包的理解。

答案:作用域决定了变量的可见性和可访问性。

在 JavaScript 中有全局作用域和函数作用域。

闭包是指有权访问另一个函数作用域中的变量的函数。

闭包可以让函数记住其创建时的环境,即使外部函数已经执行完毕,闭包仍能访问外部函数中的变量。

2、如何实现 JavaScript 的继承?答案:常见的实现方式有原型链继承、借用构造函数继承、组合继承、寄生组合继承等。

原型链继承通过将子类型的原型指向父类型的实例来实现继承;借用构造函数继承通过在子类型的构造函数中调用父类型的构造函数来继承属性;组合继承结合了原型链继承和借用构造函数继承的优点;寄生组合继承是一种优化的组合继承方式,避免了不必要的父类实例属性的重复创建。

Web前端中级面试题

Web前端中级面试题

Web前端中级面试题一、不定项选择1. flex属性是下列哪三个属性的缩写?( )A.flex-growB.flex-wrapC.flex-shrinkD.flex-basis2. 下列哪些选项是JavaScript中的假值(Falsy value)?( )A. 0B. ""C. nullD. undefinedE. NaNF. "false"3. 下列选项中,不是window对象的属性的是( )A. pageXB. locationC. historyD. navigator4. 下面程序输出的结果是什么?( )function sayHi() {console.log(name);console.log(age);var name = "Lydia";let age = 21;}sayHi();A: Lydia 和undefinedB: Lydia 和ReferenceErrorC: ReferenceError 和21D: undefined 和ReferenceError5. 下列关于原型的说法错误的是( )A. 原型可以节省内存空间B. 构造函数中的prototype属性,它是一个对象,我们称之为原型C. 原型有constructor属性,原型的constructor属性指向构造函数D. 任何一个对象都有__proto__属性,实例的对象的__proto__属性指向构造函数二、填空题1. JavaScript是由哪几部分组成。

2. 表达式“123abc”-“123”的计算结果是。

3. 写出三种获取DOM元素的方法。

4. [ 1 , 2 , 3 ].map(parseInt) 输出结果为。

5. 请写出以下代码的执行顺序。

console.log(1)const p = new Promise((resolve) => {console.log(2)resolve()})console.log(3)setTimeout(() => {console.log(4)}, 0)p.then(() => console.log(5))setTimeout(() => {console.log(6)}, 0)console.log(7)三、简答题1. 请写出10个数组实例可以调用的方法。

高级前端面试 题

高级前端面试 题

高级前端面试题通常会涉及更深入的技术知识和问题解决能力。

以下是一些可能会在高级前端面试中出现的题目:
1. 解释一下什么是响应式设计,如何在前端实现响应式设计?
2. 你如何理解前端工程化?你在这方面有哪些实践经验?
3. 请解释一下什么是虚拟DOM,为什么我们需要它?
4. 请解释一下JavaScript中的闭包是什么,以及如何使用它?
5. 请解释一下事件冒泡和捕获,以及如何在JavaScript中阻止事件冒泡?
6. 请解释一下JavaScript中的Promise对象,以及如何使用它来处理异步操作?
7. 你如何理解HTTP/2协议中的多路复用?它对前端开发有哪些影响?
8. 请解释一下什么是前端路由,以及如何实现一个简单的前端路由?
9. 请解释一下什么是Webpack,以及Webpack的常见配置有哪些?
10. 你如何理解前端安全问题?你在这方面有哪些实践经验?
以上题目只是高级前端面试中的一部分,具体面试中还会根据应聘者的经验和技能水平进行针对性的提问。

建议应聘者在准备面试时,要熟悉前端技术的基础知识,深入了解常见的前端框架和库,掌握常见的项目管理和团队协作技能,以及积累一些解决实际问题的经验。

架构师面试题参考

架构师面试题参考

架构师面试题参考架构师面试题参考一、牛人出的面试题如下:1. struts,spring,hibernate这样的开源框架,他们的历史局限性在哪里?在何种情况下会不适合用这些框架?2. 如果要设计一个搜索引擎,像google那样只有两个页面,要求性能最大化,web方面应该如何设计?(不需要考虑搜索的逻辑)3. 如果要设计一个用于小型路由器中的web系统,应该如何来设计?4. 请评价下你所熟悉的web框架的可测试性如何,struts,springMVC,webwork 或其他均可.在什么样的条件下才能对web系统引入自动化测试?请描述一套完备的面向web系统的自动化测试框架所应当具有的特性.5. 企业级应用有哪些特殊要求?在何种情况下我们不需要考虑这些要求?6. 你们从前的研发流程是怎样的?如果由你来设计研发流程,是否能大幅提高生产力和开发质量?如果能,那体现在哪些方面?如果不能,瓶颈在哪里?二、以下好像是另一个牛人跟帖给的'一个自己的答案,内容如下:1. struts,spring,hibernate这样的开源框架,他们的历史局限性在哪里?在何种情况下会不适合用这些框架?struts是以请求回答方式为基础的.ajax,flash等富客户端越来越多了.....spring是由于java的静态类型限制,等java可以支持动态方法添加之后.....hibernate是由于数据库都是关系型的,等数据库面向了对象之后.....综上所述...ssh蹦达不了几天了.2. 如果要设计一个搜索引擎,像google那样只有两个页面,要求性能最大化,web方面应该如何设计?(不需要考虑搜索的逻辑)性能:1客户端:js的写法,数据排列,不同浏览器区别.2服务器:逻辑,计算,缓存,减少I/O,提高命中3传输:带宽,缓存,异步,进度条,并发,集群,数据压缩.我认为最主要的性能是人的体验,其它都是可以放到第二位去的.3. 如果要设计一个用于小型路由器中的web系统,应该如何来设计?使用不需要并发多线程的简单文件服务器提交后直接改文件.不使用常规异常捕获方式(由于选择性少所以根本不使用异常,只提供软硬的复位)4. 请评价下你所熟悉的web框架的可测试性如何,struts,springMVC,webwork 或其他均可.在什么样的条件下才能对web系统引入自动化测试?请描述一套完备的面向web系统的自动化测试框架所应当具有的特性.由于容器的限制所以:web,spring,hibernate都不是很好测试.由于大多数web是以人的体验为主的.主观概念变成代码代价过高由于页面生成工具没有足够的测试支持.所以写出的代码非常难以程序化自动化现有的seleniumIDE还不是很稳定如果把html,js,css分开,页面内容以json或xml来传输,页面的逻辑由js二次绚染成型那么测试成本会下降很多.....(开发成本提高2到5倍)5. 企业级应用有哪些特殊要求?在何种情况下我们不需要考虑这些要求?,性能,扩展性,7*24小时,性能问题在出现性能问题之前不考虑扩展性问题在签定长期维护,二期开发合同之前不考虑7*24工作系统一般不考虑...开发中本身就是6. 你们从前的研发流程是怎样的?如果由你来设计研发流程,是否能大幅提高生产力和开发质量?如果能,那体现在哪些方面?如果不能,瓶颈在哪里?。

web前端面试题总结(包括京东、科大讯飞、软通动力一些公司)

web前端面试题总结(包括京东、科大讯飞、软通动力一些公司)

web前端⾯试题总结(包括京东、科⼤讯飞、软通动⼒⼀些公司)前端⾯试总结(红⾊题为必考,其他为常考)⼀、关于css⾯试题 1、css垂直居中的集中⽅式? html结构如下:<div class="box"><div>垂直居中</div></div> ⽅法1:display:flex.box{display: flex;justify-content:center;align-items:Center;} ⽅法2:绝对定位和负边距 .box{position:relative;} .box div{position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px; text-align: center; } ⽅法3:translate.box{position:relative;}.box childdiv{position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align: center;} ⽅法4:table-cell.box{ display: table-cell;vertical-align: middle;text-align: center;} ⽅法5:偏移量0+margin:auto.wrap{positon:relative;}.center{positon:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}2、对于移动端的布局⽅式? 答:1.【采⽤display:flex布局兼容ie10+(推荐地址)】 2.采⽤百分⽐布局; 3.采⽤rem、em、或者vh vw来写宽⾼布局3、对于移动端使⽤rem,em、px、vw/vh区别 答:px :绝对单位,页⾯按像素计算,其值固定不变 em : 相对定位,相对于⽗节点的值来计算,缺点:相对于⽗节点的font-size(默认为16px)值来计算,出现层层嵌套问题,计算⿇烦 rem:相对定位,相当于em的升级版,区别在于rem相对于根元素html来计算,不会出现em的层层嵌套问题,可以作为弹性布局,其浏览器兼容性也⽐较好;(缺点:1.和根元素的font-size耦合性 强,系统字体⽅法缩⼩时,会出现布局混乱的情况,2,html头部需要插⼊⼀段js代码 vw vh:浏览器视窗⼤⼩(viewport)即:100vw = window.innerwidth 100vh = window.innerHeiht %:百分⽐ vw 和 % 的区别:1.%是根据⽗元素的宽⾼来计算的,⽽vw则是以viewport来计算 2.100vw包括了页⾯滚动条宽度(页⾯滚动条属于viewport范围内,100vw当然包括了页⾯滚动条宽度)4、css3的兼容问题(⼀般简单的答⼀些常⽤的兼容问题就好,不常⽤的就说碰到了百度解决的)5、盒⼦模型(标准盒⼦模型、ie盒⼦模型) 答:盒⼦模型由 html元素的内容content+内边距padding+边框border+外边距margin组成,标准盒⼦模型(box-sizing:content-box)元素的所设宽度就是内容content宽度⽽ie盒⼦模型(box-sizing:border-box)所设宽度由content+padding+border组成⼆、关于html5、css3⾯试题1、html5的新属性有哪些?(列举⼀些新增常⽤的语义化标签nav、footer、section、article、aside,以及input新增属性type:date、email、time、color等,以及媒体标签(video、audio),canvas,svg,本地存储(localstorage、sessionstorage),websocket以及实现原理)2、css3新增属性以及动画? ①border-radius:圆⾓边框;②border-image:图⽚边框;③background-size:背景的尺⼨ ④background-origin:背景图⽚的定位区域 ⑤text-shadow:⽂本阴影效果 ⑥word-wrap:单词太长的话就可能⽆法超出某个区域,允许对长单词进⾏拆分,并换⾏到下⼀⾏ ⑦transform:translate(平移)/rotate(旋转)/scale(缩放)/skew(扭曲); ⑧transition:background 2s; transition-property: 过渡属性(默认值为all) transition-duration: 过渡持续时间(默认值为0s) transiton-timing-function: 过渡函数(默认值为ease函数) transition-delay: 过渡延迟时间(默认值为0s) ⑨@media媒体查询 @media screen and (max-width: 300px) {body { //写专属该媒体查询内的专属cssmargin: 0px; padding: 0px;}}⑩animation:3、前端seo优化有哪些?(推荐地址:)4、Localstorage、sessionstorage、cookie三者各个的区别,及特点,优点,本地存储使⽤场景具体怎么使⽤?(推荐地址:)三、关于js/jq⾯试题1、http请求过程有哪些?(推荐地址:)1. 对⽹址进⾏DNS域名解析,得到对应的IP地址2. 根据这个IP,找到对应的服务器,发起TCP的三次握⼿3. 建⽴TCP连接后发起HTTP请求4. 服务器响应HTTP请求,浏览器得到html代码5. 浏览器解析html代码,并请求html代码中的资源(如js、css、图⽚等)(先得到html代码,才能去找这些资源)6. 浏览器对页⾯进⾏渲染呈现给⽤户7. 服务器关闭关闭TCP连接2、原⽣ajax请求过程?//第⼀步,创建XMLHttpRequest对象var xmlHttp = new XMLHttpRequest();//第⼆步,注册回调函数xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4)if (xmlHttp.status == 200) { //取得返回的数据 var data = xmlHttp.responseText;}}}//第三步,配置请求信息,open(),get//get请求下参数加在url后,.ashx?methodName=GetAllComment&str1=str1&str2=str2xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);//post请求下需要配置请求头信息//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//第四步,发送请求,post请求下,要传递的参数放这xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"3、post请求以及get请求的优缺点?(1)post更安全(不会作为url的⼀部分,不会被缓存、保存在服务器⽇志、以及浏览器浏览记录中)(2)post发送的数据更⼤(get有url长度限制)(3)post能发送更多的数据类型(get只能发送ASCII字符)(4)post⽐get慢(5)post⽤于修改和写⼊数据,get⼀般⽤于搜索排序和筛选之类的操作(淘宝,⽀付宝的搜索查询都是get提交),⽬的是资源的获取,读取数据4、对array数组处理以及string处理的⼀些常⽤⽅法?(推荐地址:)5.js对数据类型检测,例如:如何检测数据类型为string/number/array等(推荐地址:)6、如何遍历⼀个数组⾥的每个数据?(主要考遍历的⼀些⽅法 for循环,forEach(),map()⽅法,filter())7、js中排序的⼏种⽅式?(推荐地址:)8、JavaScript中捕获/阻⽌捕获、冒泡/阻⽌冒泡,事件流(推荐地址:)9、怎样进⾏深拷贝及浅拷贝?他们的区别?(推荐地址:)10、关于this指向问题,在不同的场景下this的指向?11、关于闭包,如何创建闭包,闭包的⽤处及缺点?(推荐地址:)12、怎样理解原型、原型链?答:每个对象都会在其内部初始化⼀个属性,就是prototype(原型),当我们访问⼀个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype⾥找这个属性,这个prototype⼜会有⾃⼰的prototype,于是就这样⼀直找下去,也就是我们平时所说的原型链的概念。

Ajax笔试题

Ajax笔试题

Ajax内部测试——笔试题【题目数量:50题,每题2分】【完成时间:60分钟】1、下面为定义一个Web Service的代码,阅读下面代码:namespace WSAdd{public class Service1{public Service1(){InitializeComponent();}[WebMethod]public int Subtr(int x,int y){return (x-y);}}}关于上述代码的描述正确的是()。

(选择一项)√A). 可以提供名为Service1和Subtr的Web服务B). 可以提供名为Subtr的Web服务C). 代码在编译后,不能提供任何Web服务D). 该代码编译不能通过2. 在 AJAX中,关于AutoComplete控件的说法错误的是()。

(选择一项)A). CompletionSetCount属性表示提示数据的行数B). AutoComplete调用的WebMethod返回值数据类型一般为字符串数组C). AutoComplete所调用的WebService类必须加上[System.Web.Script.Service.ScriptService()]特性D). EnableCaching属性设置为0表示不启用缓存3. 以下关于调用Web Service的描述错误的是()。

(选择一项)A). 需要添加Web引用B). 需要实例化Web Service类C). 可以实现跨项目调用,但是不能实现异地调用D). 为了让异地程序调用我们的Web Service,我们需要把Web Service发布出去4. 在中使用Substitution控件实现页面部分缓存时,该控件的MethodName属性所调用的方法返回类型是()。

(选择一项)A). staticB). stringC). HttpContextD). int5. 在中,以下关于用户控件说法错误的是()。

初级前端面试题

初级前端面试题

初级前端面试题前端开发岗位是当前互联网行业中需求量比较大的一个职位,随着互联网行业的迅速发展,对前端开发人员的需求也越来越高。

为了选拔适合的候选人,面试人员常常会给面试者一些初级前端面试题。

以下是一些常见的初级前端面试题及其答案,供大家参考。

1. 请解释什么是HTML。

HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。

它由一系列的标签构成,每个标签代表网页中的一个元素,如标题、段落、链接等。

HTML被用来结构化信息,并为信息添加一些语义,使得浏览器能够正确地显示和解释网页内容。

2. 请解释什么是CSS。

CSS(Cascading Style Sheets)是一种用于控制网页样式的语言。

通过CSS,我们可以控制网页中各个元素的外观、布局和排版。

CSS通过选择器来选取HTML中的元素,并为其应用样式规则,从而改变其呈现方式。

3. 请解释什么是JavaScript。

JavaScript是一种基于对象和事件驱动的脚本语言,常用于为网页添加动态和交互特效。

与HTML和CSS不同,JavaScript是一种编程语言,具有更强大的功能。

它可以操作网页的各个元素、处理用户输入、与服务器进行交互等。

4. 请解释什么是响应式设计(Responsive Design)。

响应式设计是一种设计理念,旨在使网页能够根据用户的设备和屏幕大小来自适应地调整布局和样式。

通过使用CSS3的媒体查询和弹性网格布局等技术,响应式设计可以使网页在不同的设备上都能够以最佳的方式呈现,并提供更好的用户体验。

5. 请解释什么是跨域(Cross-Origin)。

跨域指的是在浏览器中,当一个网页的代码试图向另一个网域(域名/端口/协议)发送请求的时候,由于浏览器的同源策略限制,请求会被阻止。

跨域是为了防止恶意的网页获取其他网站的信息。

可以通过使用JSONP、CORS等技术来解决跨域问题。

6. 请解释什么是事件委托(Event Delegation)。

经典的20道AJAX面试题

经典的20道AJAX面试题
AJAX开始流行始于Google在2005年使用的”Google Suggest”。
“Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口:
当用户开始输入google的搜索框,Javascript发送用户输入的字符到服务器,然后服务器返回一个建议列表。
有,IE中通过new ActiveXObject()得到,Firefox中通过newXMLHttpRequest()得到
10、介绍一下XMLHttpRequest对象的常用方法和属性。
open(“method”,”URL”) 建立对服务器的调用,第一个参数是HTTP请求 方式可以为GET,POST或任何服务器所支持的您想调用的方式。
1、什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识)
什么是ajax:
AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术:
基于web标准(standards-basedpresentation)XHTML+CSS的表示;
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
20、AJAX都有哪些优点和缺点?
1、最大的一点是页面无刷新,用户的体验非常好。
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

1. Ajax有四种技术组成:DOM,CSS,JavaScript,XmlHttpRequest中控制文档结构的是:()A DOMB CSSC javascriptD XMLHttpRequest参考答案:A2. 在Ajax的四种技术中,控制通信的是哪一个?()A DOMB CSSC javascriptD XMLHttpRequest参考答案:D3. 在Ajax的四种技术中,JavaScript的主要作用是:()A 控制页面显示风格B 控制文档结构C 控制通信D 控制其他的三个对象参考答案:D49.当XMLHttpRequest 对象的状态发生改变时调用yourCallback 函数,下列选项中正确的是()。

A.xmlHttpRequest. yourCallback = onreadystatechange; B.xmlHttpRequest.onreadystatechange (yourCallback); C.xmlHttpRequest.onreadystatechange (new function(){yourCallback }); D.xmlHttpRequest.onreadystatechange = yourCallback;50.关于XmlHttpRequest 对象的五种状态,下列说法正确的是()。

A.1表示新创建B.2表示初始化C.3表示发送数据完毕D.4表示接收结果完毕5. 在处理应答中,如果我们要以文本的方式处理,我们需要在参数表中放置XMLHttpRequest对象的什么属性?()A xhr.responseTextB xhr.responseXMLC xhr.requestTextD xhr.requestXML参考答案:A6. 在处理应答中,如果我们要处理XML文档,我们需要在参数表中放置XMLHttpRequest 对象的什么属性?()A xhr.responseTextB xhr.responseXMLC xhr.requestTextD xhr.requestXML参考答案:B7. 在IE浏览器上创建XMLHttpRequest对象的方法是?()A var a=new ActiveXObject("Microsoft.XMLHTTP");B var a=new XMLHttpRequest();参考答案:A8. xhr.status==200表示什么?A 表示错误B 表示找不到资源文件C 表示成功参考答案:C9. xhr.status==404表示什么?A 表示错误B 表示找不到资源文件C 表示成功参考答案:B3. 以下哪个技术不是Ajax技术体系的组成部分?a. XMLHttpRequestb. DHTMLc. CSSd. DOM正确答案:bAJAX应用和传统Web应用有什么不同?在传统的Javascript编程中,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML form然后GET或者POST数据到服务器端。

用户需要点击”Submit”按钮来发送或者接受数据信息,然后等待服务器响应请求,页面重新加载。

因为服务器每次都会返回一个新的页面,所以传统的web应用有可能很慢而且用户交互不友好。

使用AJAX技术,就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。

通过HTTP Request,一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面),展示给用户的还是通一个页面,用户感觉页面刷新,也看不到到Javascript后台进行的发送请求和接受响应。

介绍一下XMLHttpRequest对象通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。

AJAX开始流行始于Google在2005年使用的”Google Suggest”。

“Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口:当用户开始输入google的搜索框,Javascript发送用户输入的字符到服务器,然后服务器返回一个建议列表。

XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

AJAX的全称是什么?介绍一下AJAXAJAX的全称是Asynchronous JavaScript And XML. AJAX是2005年由Google发起并流行起来的编程方法,AJAX不是一个新的编程语言,但是它是一个使用已有标准的新的编程技术。

使用AJAX可以创建更好,更快,更用户界面友好的Web应用。

AJAX技术基于Javascript和HTTP Request.不同浏览器创建XMLHttpRequest 方法有什么不同?XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。

后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。

对于Internet Explorer浏览器:xmlhttp_request = new ActiveXObject(”Msxml2.XMLHTTP.3.0″); //3.0或4.0, 5.0 xmlhttp_request = new ActiveXObject(”Msxml2.XMLHTTP”);xmlhttp_request = new ActiveXObject(”Microsoft.XMLHTTP”);由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet Explorer浏览器,因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。

对于Mozilla﹑Netscape﹑Safari等浏览器创建XMLHttpRequest 方法如下:xmlhttp_request = new XMLHttpRequest();如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。

为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();xmlhttp_request.overrideMimeType(’text/xml’);在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式:try{if( window.ActiveXObject ){for( var i = 5; i; i– ){try{if( i == 2 ){xmlhttp_request = new ActiveXObject( “Microsoft.XMLHTTP” ); }else{xmlhttp_request = new ActiveXObject( “Msxml2.XMLHTTP.” + i + “.0″ ); xmlhttp_request.setRequestHead er(”Content-Type”,”text/xml”);xmlhttp_request.setRequestHeader(”Charset”,”gb2312″); }break;}catch(e){xmlhttp_request = false; } } }else if( window.XMLHttpRequest ){ xmlhttp_request = new XMLHttpRequest();if (xmlhttp_request.overrideMimeType){ xmlht tp_request.overrideMimeType(’text/xml’); } } }catch(e){ xmlhttp_request = false; }发送请求了可以调用HTTP请求类的open()和send()方法,如下所示:xmlhttp_request.open(’GET’, URL, true);xmlhttp_request.send(null);open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。

按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。

如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。

这就是”AJAX”中的”A”。

服务器的响应这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。

可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:xmlhttp_request.onreadystatechange =FunctionName;FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:xmlhttp_request.onreadystatechange = function(){// JavaScript代码段};首先要检查请求的状态。

只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。

XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

readyState的取值如下:0 (未初始化)1 (正在装载)2 (装载完毕)3 (交互中)4 (完成)所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。

具体代码如下:if (http_request.readyState == 4) { // 收到完整的服务器响应}else { // 没有收到完整的服务器响应}当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。

完整的状态取值可参见W3C文档。

当HTTP服务器响应的值为200时,表示状态正常。

相关文档
最新文档