JavaScript中的ajax怎么用

ajax通过局部刷新给用户带来了更好的交互体验,今天咪咪我就来分享一下ajax的用法。

操作方法

  • 01

    第一步,新建一个html界面,这里我就新建一个“index.html”的界面。界面中有一个div和一个button。给div添加id,待会我们通过ajax把从服务器获取到内容添加到div里面。

  • 02

    接着在script里面定义一个函数,这个函数就是用来创建ajax对象,并且向服务器发送请求的。如图,我就定义一个变量ajax,然后使用if(window.XMLHttpRequest)来判断浏览器是否支持XMLHttpRequest,如果支持,则创建一个对应的对象。

  • 03

    如果不支持XMLHttpRequest,则创建 ActiveXObject 对象。ActiveXObject是IE5和IE6里面的,这两个版本的浏览器基本没人用了,不过有些公司也要求兼容这两版浏览器。

  • 04

    创建好对象之后,我们就可以调用open方法来发起请求。open里面有三个参数,第一个表示请求方式,这里我就使用get请求。第二个参数表示请求的地址,这里我就使用PHP文件,待会我再写这个文件。第三个参数表示同步或者异步,true表示异步,false表示同步,这里我就用异步(ajax最大的特点就是异步)。之后,再调用send方法。如果是get请求,则send里面的参数为空。

  • 05

    之后,给onreadystatechange事件绑定一个匿名函数。onreadystatechange表示的是请求响应状态改变事件。当向服务器发送请求时,请求的状态,响应的状态都会发生改变,而改变的时候就可以触发这个事件了。

  • 06

    之后,判断readyState和status的状态,200状态码表示请求完成,4状态码表示响应就绪。之后,我们就可以把responseText里面的数据添加到div里面了。responseText是XMLHttpRequest对象的属性,它保存着服务器返回的数据。

  • 07

    之后,我们给之前的按钮绑定一个点击事件。

  • 08

    然后写好之前的“my.php”文件,这里我就写一个最简单的。

  • 09

    然后安装好xampp,记住它的安装路径,然后启动xampp,如图所示,点击“start”。

  • 10

    之后,找到xampp的安装路径,在里面找到htdocs文件夹,把我们之前编写的index.html和my.php文件放到htdocs文件夹里面。

  • 11

    之后,在浏览器地址栏输入地址,localhost/index.html,注意,localhost后面跟你的文件名要一致,我的是index.html,所以就写index.html。然后按回车键就可以看到编写好的界面了,我们点击按钮试试看效果。

  • 12

    之后,我们就会看到页面在没有全部刷新的情况下就从服务器获取到数据了。

(0)

相关推荐

  • JavaScript中清空数组的三种方式

    JavaScript中清空数组的三种方式 方式1,splice 01 var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary);  ...

  • JavaScript中的CSS属性对照表

    JavaScript中的CSS属性对照表是js初学者必备的基础知识 操作方法 01 盒子标签和属性对照  颜色和背景标签和属性对照 样式标签和属性对照 文字样式标签和属性对照

  • JavaScript中function定义函数的几种方法

    操作方法 01 JavaScript中function定义函数的几种方法: 1.最基本的作为一个本本分分的函数声明使用. function func(){} 或 var func=function() ...

  • 如何应用JavaScript中的弹窗

    在使用JavaScript的时候,弹窗是进行信息交互的必备元素.JavaScript中有三种弹窗方式供用户选择,下面小编分别给大家介绍这三种弹窗的使用方法. 操作方法 01 首先打开Sublime T ...

  • JAVASCRIPT中的加减乘除

    js中实现加减乘除 操作方法 01 /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果 ...

  • javascript中this详解

    this 01 this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 纯粹函数调用 01 functio ...

  • JavaScript中getBoundingClientRect()方法详解

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

  • 在JavaScript中引用引用JS文件或css文件

    操作方法 01 JavaScript:head=document.getElementsByTagName('head').item(0);CreateLink("css/test.css& ...

  • vs2008 JavaScript 语法提示(Intellisense)功能

    Visual Studio 2008将是一个非常激动人心的版本,包含了成堆的强大的功能。其中一个新特性就是更加完善的支持对JavaScript的调试及IntelliSense功能。Visual Stu ...