PHP中AJAX的使用JS篇(完整实例【大牛可飘过】)

2024-02-20 02:58

本文主要是介绍PHP中AJAX的使用JS篇(完整实例【大牛可飘过】),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    AJAX在js里可谓是一个牛气冲天的一个词,我刚学的时候有点望名生畏。对于初学者来说AJAX看似很难,图书馆里有些关于AJAX的教程比板砖都厚,看了就不想学。但当你真正长用的东西其实就那么写。在这就不扯那些书上扯的AJAX的历史考古的淡了,不然的话会碎的,你懂的。OK直入正题。

  在这呢我主要说一下AJAX的用法,原理就不多说了。

  1.你要用AJAX首先得会js吧,这个不用多说。

    首先你得NEW一个AJAX的对象,类必须得事例化才能使用,这个大家都知道对吧

    第一步:var oAjax = new XMLHttpRequest();

    但是为了兼容IE6这么蛋疼的浏览器一般这么写:

     if(window.XMLHttpRequest)

     {

        var oAjax = new XMLHttpRequest();

     }

     else

     {

      //IE

      var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

     }

    到这为止对象就事例化好了。

  2.第二步咱得给服务器连接起来吧,这是必须的啊;

  用open();用法是这样的:open(传输方式,文件地址,同步还是异步(默认异步))

    oAjax.open('get','ajax.php?hehe='+sValue,true);

  3.得发送请求吧:

    oAjax.send();

  4.就是接收返回值了,就不废话了,直接看代码吧:

    oAjax.onreadystatechange=function()
    {

    //oAjax.readyState 记录步骤
      if(oAjax.readyState == 4)
      {
        if(oAjax.status == 200)
        {
          oDiv.innerHTML = oAjax.responseText;
        }
        else
        {
          alert("失败");
        }
      }
      else
      {
        alert(oAjax.readyState);//记录步骤
      }
    }

 到此为止AJAX就OK了:

下面是我实验的完整事例:

html代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7 window.onload=function()
 8 {
 9     var oBtn1=document.getElementById('btn1');
10     var oInput=document.getElementById("hehe");
11     var oDiv=document.getElementById("div1");
12     oBtn1.onclick=function()
13     {
14         var sValue=oInput.value;
15         //alert(sValue);
16         //1.创建Ajax对象
17         //只兼容非IE6的浏览器
18         if(window.XMLHttpRequest)
19         {
20             var oAjax=new XMLHttpRequest();
21         }
22         else
23         {
24             //IE6
25             var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
26         }
27         //alert(oAjax);
28         //2.连接服务器
29         //open(传输方式,文件地址,同步还是异步(默认异步))
30         oAjax.open('get','ajax.php?hehe='+sValue,true);
31         
32         //3.发送请求
33         oAjax.send();
34         
35         //4.接收返回
36         oAjax.onreadystatechange=function()
37         {
38             
39             //oAjax.readyState  记录步骤
40             if(oAjax.readyState == 4)
41             {    
42                 if(oAjax.status == 200)
43                 {
44                     oDiv.innerHTML = oAjax.responseText;
45                 }
46                 else
47                 {
48                     alert("失败");
49                 }
50             }
51             else
52                 {
53                     alert(oAjax.readyState);//记录步骤
54                 }
55         }
56         //oAjax.send();
57         
58     }
59 }
60 </script>
61 </head>
62 
63 <body>
64     <form method="" action="ajax.php">
65         呵呵:<input type="text" size=20 name="hehe" id="hehe">
66         <input type="button" value="提交" id="btn1">
67     </form>
68     <div id="div1">
69     </div>
70 </body>
71 </html>

后台PHP代码ajax.php

1 <?php
2     $hehe=$_GET['hehe'];
3     echo $hehe;
4 ?>

简单的AJAX用法事例到此为止,特为初学者而写,大牛可飘过……

这篇关于PHP中AJAX的使用JS篇(完整实例【大牛可飘过】)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/726820

相关文章

Pydantic中Optional 和Union类型的使用

《Pydantic中Optional和Union类型的使用》本文主要介绍了Pydantic中Optional和Union类型的使用,这两者在处理可选字段和多类型字段时尤为重要,文中通过示例代码介绍的... 目录简介Optional 类型Union 类型Optional 和 Union 的组合总结简介Pyd

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

AJAX请求上传下载进度监控实现方式

《AJAX请求上传下载进度监控实现方式》在日常Web开发中,AJAX(AsynchronousJavaScriptandXML)被广泛用于异步请求数据,而无需刷新整个页面,:本文主要介绍AJAX请... 目录1. 前言2. 基于XMLHttpRequest的进度监控2.1 基础版文件上传监控2.2 增强版多

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

Linux中的计划任务(crontab)使用方式

《Linux中的计划任务(crontab)使用方式》:本文主要介绍Linux中的计划任务(crontab)使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言1、linux的起源与发展2、什么是计划任务(crontab)二、crontab基础1、cro

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java

C++变换迭代器使用方法小结

《C++变换迭代器使用方法小结》本文主要介绍了C++变换迭代器使用方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1、源码2、代码解析代码解析:transform_iterator1. transform_iterat

C++中std::distance使用方法示例

《C++中std::distance使用方法示例》std::distance是C++标准库中的一个函数,用于计算两个迭代器之间的距离,本文主要介绍了C++中std::distance使用方法示例,具... 目录语法使用方式解释示例输出:其他说明:总结std::distance&n编程bsp;是 C++ 标准