原生 javascript ajax 实例演示
2018-01-25 13:45
260 查看
(对低版本的 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 代码:
data.php代码:
结果演示:点击按钮之前
点击按钮之后:
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 + 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.onclick=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 代表 ok if(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原生xmlHttp与jquery的ajax方法json数据格式实例
- 原生javascript实现Ajax和jQuery实现Ajax实例应用
- Ajax Rain-Ajax/JavaScript实例演示与下载站点
- 实例讲解使用原生JavaScript处理AJAX请求的方法
- 实例讲解使用原生JavaScript处理AJAX请求的方法
- JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
- Javascript实例【四】自己写的Ajax
- 原生javascript实现文件异步上传的实例讲解
- 原生JavaScript和JQuery两种方式实现AJAX
- AJAX XML 实例 下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息:
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
- 10个非常棒的Ajax及Javascript实例资源网站
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- javascript入门系列演示·三种弹出对话框的用法实例(转)
- 【前端学习笔记】原生Javascript中的ajax
- 不用JQuery,原生Javascript实现Ajax功能及相关知识点
- 【转】javascript入门系列演示·三种弹出对话框的用法实例
- 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
- javascript入门系列演示·三种弹出对话框的用法实例
- Servlet3.0与纯javascript通过Ajax交互的实例详解