欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-31 15:39:04
ajax作用:ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。实现前后端分离。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。 在js里面aja... ......

        提到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","");
    //
建立连接里参数问题:
语法:    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的安装目录
  Ajax如何实现从前端不刷新页面就可以到后端取到数据

  2.打开找到www文件夹

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

 

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

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

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

    现在运行你的html代码:

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

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

 

上一篇:

下一篇: