原生 javascript ajax 实例演示

（对低版本的 ie 不作兼容处理了，太过时，不知道谁还用）

本次演示采用原生javascript + php 实现ajax的 post 和 get 功能;

对php不了解的同学不用担心，就两三行代码，而且我会详细说明；

好了，下面开始：

第一步：如果想要运行起来，那么还是需要开启服务器的，这里推荐使用 wampserver，

下载相应的版本即可，注意你的电脑是32位的还是64位的，例如我的电脑64位的

那么我下载64位的即可，百度即可；

安装到d盘吧，安装完成桌面会有这个图标，如果没有，就去找找安装的软件，

然后添加快捷到桌面即可；

点击启动wampserver，当相应的图标从红色变到黄色再变到绿色，

那说明一切ok;当然也有可能出现各种问题，比如显示你的电脑缺少这个东西，

缺少那个东西，或者根本就不会变绿，而是一直是红色或者黄色，那就悲剧了，

得慢慢解决了，这里不赘述，

我就当你可以启动了，因为重点是ajax；

打开浏览器，输入：localhost 或者127.0.0.1，如果有页面输出，

那么安装是没问题的

如果你只想看看如何实现，不想安装测试，那就进行下一步；

第二步：找到wampserver 安装目录，如果你没安装成功，那就看看如何做吧，

操作是进行不下去了

（或者联系我，我帮你解决，给我留言即可）；比如我的：

我安装在D盘下，我的软件起名wamp1，你的你默认是wamp，

打开这个文件夹，找到www文件夹；

在www文件夹下建立本次的项目：datacenter，随便起名字；

第三步：在datacenter中新建两个文件，一个index.html , 一个data.php，

注意文件保存为utf-8编码方式；

建好之后如何查看页面呢；

打开浏览器，输入：localhost 或者127.0.0.1，选择你的项目，

默认打开的是index.html文件；

1.AJAX get ：（不传递参数）当我点击页面中的按钮时，获取后台数据，

然后显示在标签 <p>中；

index.html 代码：

<!doctype html>
<html><head><meta charset="utf-8"><title>ajax POST GET </title></head><body><p id="def">nothing</p><button id="abc">ajax</button><script>//取得 id=abc 的按钮;var btn=document.getElementById("abc");//取得 id=def 的段落标签<p>;var def=document.getElementById("def");//点击按钮时执行函数btn.οnclick=function(){//ajax第一步var request=new XMLHttpRequest();//ajax第二步,第一个参数GET,第二个是我们要找谁要数据，//第三个是异步还是同步，true代表异步，不要同步；request.open("GET","data.php",true);//第三步，send()里面空着request.send();//第四部 发送请求出发下面这个函数request.onreadystatechange=function(){//readyState 有这几种状态，我们只需要判断4就行;// 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成，且响应已就绪if(request.readyState==4){//status 状态200 代表 okif(request.status==200){//request.reponseText代表后台返回的数据def.innerHTML=request.responseText;}}}}    </script></body>
</html>

data.php代码：

<?php//我们假装已经从数据库取得了字符串"坚持学习..."//用变量$str 表示字符串//php中变量前面加个$;$str="坚持学习就会成功！";//向index.html返回数据//inde.html中 request.responseText==这里的$str;echo $str;
?>

结果演示：点击按钮之前

点击按钮之后：

2.AJAX post ：（不传递参数）当我点击页面中的按钮时，获取后台数据，

然后显示在标签 <p>中；

和上面的get方式的区别是把参数get 换成post 即可：

即把：

request.open("GET","data.php",true);

换成

request.open("POST","data.php",true);

其它的全部一样；

3.AJAX get ：（传递参数）当我点击页面中的按钮时，获取后台数据，

然后显示在标签 <p>中；

传递参数是什么意思呢，就是发送请求的时候，顺便把一个东西传给后台，

然后后台接收数据进行处理；

get 如何传递数据，再次修改index.html;

即把：

request.open("GET","data.php",true);

换成

request.open("GET","data.php?id="+123,true);

这里我传递了一个id=123给后台

那么data.php也要变化：

data.php代码:

<?php

//通过 $_GET 获取 id;

$id=$_GET['id'];

//向index.html返回数据

//inde.html中 request.responseText==这里的$str;

echo$id;//又把id返回给前台，绕了一个圈数据又回去了，

运行之后，点击按钮：

4.AJAX post ：（传递参数）当我点击页面中的按钮时，获取后台数据，

然后显示在标签 <p>中；

这里的post又是如何传递参数的呢；

我们再次修改index.html中的ajax部分为：

btn.onclick=function(){

//ajax第一步

varrequest=newXMLHttpRequest();

//ajax第二步,第一个参数GET,第二个是我们要找谁要数据，

//第三个是异步还是同步，true代表异步，不要同步；

request.open("POST","data.php",true);

//post传递参数加上这么个头部即可

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//第三步，post传递参数放在这里

request.send("id="+123);

//第四部发送请求出发下面这个函数

request.onreadystatechange=function(){

//readyState 有这几种状态，我们只需要判断4就行;

// 0: 请求未初始化

// 1: 服务器连接已建立

// 2: 请求已接收

// 3: 请求处理中

// 4: 请求已完成，且响应已就绪

if(request.readyState==4){

//status 状态200 代表 ok

if(request.status==200){

//request.reponseText代表后台返回的数据

def.innerHTML=request.responseText;

}

data.php代码：

<?php

//通过 $_POST 获取 id;

$id=$_POST['id'];

//向index.html返回数据

//inde.html中 request.responseText==这里的$str;

echo$id;//又把id返回给前台，绕了一个圈数据又回去了，

运行效果和上面都是一样的；

有问题欢迎留言；

原生 javascript ajax 实例演示相关推荐

2、.net NVelocity中原生javascript ajax封装使用
在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...
JavaScript 技术篇-js检测原生对象类型实例演示，js的3种对象类型
JavaScript 的对象类型共有 3 种:Object.Date.Array 判断是否为数组对象判断依据一: myArray.constructor 可以返回对象的内部构造函数,除了 Date ...
AJAX实例演示加载xml
前言先前在入门AJAX这篇文章中,简单描述了AJAX一些基础.其实这里也是基础的使用,通过这个例子在结合之前学习的方法再好好理解运用一番. 实例 html <html> <head ...
一次较为完整的原生JavaScript AJAX与Java的前后端数据交互
效果 Maven 依赖 <dependency><groupId>javax.servlet</groupId><artifactId>javax.se ...
JavaWeb 第6章 Ajax 与 JQuery 任务1：使用原生 JavaScript 发送 Ajax请求
JavaWeb 应用设计及实战目录上一章下一章上一个任务/上一节下一个任务/下一节实例链接点我目录任务1 使用原生 JavaScript 发送 Ajax 请求 6. ...
原生js的Ajax实例
与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
使用原生javascript实现ajax提交form表单
使用原生javascript实现ajax提交form表单 ============================ 1 准备表单首先我们需要编写一个html代码,这里我是采用nodej ...
java省市县联动下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做 ...

原生 javascript ajax 实例演示

原生 javascript ajax 实例演示相关推荐

最新文章

热门文章