Ajax如何实现从前端不刷新页面就可以到后端取到…

2018-10-24 08:42:27来源：博客园阅读 ()

提到axaj很多人总说很难，什么回调函数呀等等就让人心烦，其实懂得ajax在js里面是如何实现向服务器请求数据的原理，那么理解ajax也就不是很难了，现在我们一起来看看。

ajax作用：ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。实现前后端分离。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

在js里面ajax主要解决的问题就是：不刷新当前页面，把某些数据传递给服务器，把某些数据从服务器拿回客户端。

下面就是具体代码了。我们写一个程序让其前后端分离，前端操作可以让后端得到响应，并从后端取得响应的数据

一·在html里的五步走策略：

1.建立AJAX核心对象

var xhr=new XMLHttpRequest();

2.添加预加载；指如果xhr对象的预备好的状态发生了变化时，触发函数。

xhr.addEventListener("load",loadHandler);

3.建立连接

xhr.open("GET","http://10.9.164.85:80/index.php?user=zhangsan");

建立连接里参数问题：

语法： xhr.open("get", url, true);

备注：open() 方法中第1个参数指请求的发送方式，值为get或post。第2个参数指请求的url路径就是你写的php文件的路径，？后面是所携带get所要获得的相关信息。第3个参数指请求是异步还是同步，如果写true表示异步（默认true），写false表示同步。

4.向服务器发起请求

xhr.send();

语法： xhr.send();

备注：如果是get方式发送请求，send()命令中不用写任何参数传递的数据可以写在url中，服务器用$_GET[“参数名”]接收。

如果是post方式发送请求，需要设置请求头才能正确把数据传递给后端页面。我们这里采用的是get方式，所以不用写任何参数。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(“数据名1=数据值&数据名2=数据值”)，服务器用$_POST[“参数名”]接收。

5.声明预加载函数；接收响应

function loadHandler(){

获取并使用服务器的响应

console.log(xhr.response);

}

二· 在php文件里面

三步骤：

header("content-type:text/html;charset=utf-8");

设置字符编码

header("Access-Control-Allow-Origin:*");

设置Access-Control-Allow-Origin来实现跨域访问（因为不同的域名默认不允许之间不可以相互通信）

echo $_GET["user"]."今天心情很好";

所要交给前台的数据

四.实现访问：

将写好的php文件放入到phpStydy 的 www的文件夹内，如下图：

1.找到phpStyle的安装目录

2.打开找到www文件夹

3.将你写好的PHP文件复制到www文件夹里面去，如我刚写的index.php文件；

4.现在实现简单的ajax的访问；

现在运行你的html代码：

此时就会实现页面不刷新，就可以访问php的数据了

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：您只能在 HTML 输出流中使用 document.write,啥意思

下一篇：牛客网字符串排序编程题

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签