gitweixin
  • 首页
  • 小程序代码
    • 资讯读书
    • 工具类
    • O2O
    • 地图定位
    • 社交
    • 行业软件
    • 电商类
    • 互联网类
    • 企业类
    • UI控件
  • 大数据开发
    • Hadoop
    • Spark
    • Hbase
    • Elasticsearch
    • Kafka
    • Flink
    • 数据仓库
    • 数据挖掘
    • flume
    • Kafka
    • Hive
    • shardingsphere
    • solr
  • 开发博客
    • Android
    • php
    • python
    • 运维
    • 技术架构
    • 数据库
  • 程序员网赚
  • bug清单
  • 量化投资
  • 在线查询工具
    • 去行号
    • 在线时间戳转换工具
    • 免费图片批量修改尺寸在线工具
    • SVG转JPG在线工具

标签归档异步

精品微信小程序开发门户,代码全部亲测可用

  • 首页   /  
  • 标签: "异步"
php 3月 29,2022

使用PHP和Ajax进行交互

在PHP开发时,经常需要和前端进行交互。为了更好的用户体验,在不少场景需要和Ajax进行交互。

Ajax是一种在无须重新加载整个网页的情况下能够更新部分网页的技术。Ajax通过在后台与服务器进行少量数据交换可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。现代浏览器都内置了可以创建Ajax的对象。

XMLHttpRequest(Internet Explorer(IE 5和IE 6)使用ActiveX对象),这样使得我们可以很方便地创建一个Ajax对象,通过浏览器发起请求来与服务端交互。你可以使用new XMLHttpRequest()创建一个对象,如果是老版本的InternetExplorer(IE 5和IE 6),使用ActiveX对象(new ActiveXObject)即可。

可以使用new XMLHttpRequest()创建一个对象,如果是老版本的Internet Explorer(IE 5和IE 6),使用ActiveX对象(new ActiveXObject)即可。

创建完毕,可使用XMLHttpRequest对象的open()和send()方法向服务器发送请求。示例如下:

open()函数的标准语法是open(method, url, async),其规定了请求的类型method(GET或POST方法)、URL和是否异步处理(true异步,false同步)。send()包含一个参数,仅用于使用POST方法向服务端发送数据。使用POST可向服务器发送较大量的数据,并且POST方式比GET更稳定可靠,但GET方式比POST简单快捷。开发者可根据使用场景选择请求类型。Ajax指的是异步JavaScript和XML(Asynchronous JavaScriptand XML)。

XMLHttpRequest对象如果要用于Ajax,那么其open()方法的async参数就必须设置为true。对于Web开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。Ajax出现之前,这可能会引起应用程序挂起或停止。通过Ajax、JavaScript无须等待服务器的响应,而是等待服务器响应时执行其他脚本,当响应就绪后对响应再进行处理。当使用async=true后,可以规定在响应结束后执行onreadystatechange事件中的函数。responseText存储从服务端取到的数据,如下面的例子所示:

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if(window.XMLHttpRequest)
	{
		//IE 7+、Firefox、Chrome、Opera,Safari浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	}
	else
	{
		//IE 6、IE 5浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if(xmlhttp.readyState == 4 && xml.status == 200)
		{
			document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","hello.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用AJAX修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>

当单击按钮修改内容时便会通过Ajax发起请求取到hello.txt里的内容在页面显示。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当readyState改变时就会触发onreadystatechange事件,用户可自定义这个事件的回调函数。readyState存有XMLHttpRequest从0到4发生变化的状态。0表示请求未初始化,1表示服务器连接已经建立,2表示请求已经接收,3代表请求正在处理中,4表示请求已完成。status表示响应完成(readState为4)时此次响应的结果状态,200表示请求成功,404表示请求失败。


Ajax与服务端交互 :

在实际项目中使用Ajax与服务端交互,首先要约定传输数据使用的格式和规范,其中JSON数据格式是使用最为广泛的传输类型。一般的传输数据规范至少包含3个字段,即消息状态码(一般设置字段为status或code)、提示信息(msg)、消息体(data),当然字段的含义可由开发者根据需要自行设定。

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if(window.XMLHttpRequest)
	{
		//IE 7+、Firefox、Chrome、Opera,Safari浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	}
	else
	{
		//IE 6、IE 5浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if(xmlhttp.readyState == 4 )
		{
		  var data = eval('('+xmlhttp.responseText + ')');		
		}
		if(xmlhttp.status==200)
		{
			if(data.status == 0)
			{
				document.getElementById("name").value = data['data'].name;
				document.getElementById("age").value = data['data'].age;
				document.getElementById("company").value = data['data'].agecompany;
			}else{
			 alert(data.msg);
			}
		 }else if(xmlhttp.status==404){
		    alert('服务器上未找到该文件');
		 }
		}
	}
	xmlhttp.open("GET","hello.php",true);
	xmlhttp.send();
}
</script>
</head>
<body>
姓名:<input id='name'><br/>
年龄: <input id='age'><br/>
公司: <input id='company'><br/>
<button type="button" onclick="loadXMLDoc()">查询</button>
</body>
</html>

执行上面的程序将会向info.php发起请求。info.php里的代码如下:

<?php
$success = array('statuss'=>0,'msg'=>'success','data'=>array('name=>'chenxiaolong',
'age'=>'22','company'=>'360 company'));

echo json_encode($success);

?>
作者 east

关注公众号“大模型全栈程序员”回复“小程序”获取1000个小程序打包源码。回复”chatgpt”获取免注册可用chatgpt。回复“大数据”获取多本大数据电子书

标签

AIGC AI创作 bert chatgpt github GPT-3 gpt3 GTP-3 hive mysql O2O tensorflow UI控件 不含后台 交流 共享经济 出行 图像 地图定位 外卖 多媒体 娱乐 小程序 布局 带后台完整项目 开源项目 搜索 支付 效率 教育 日历 机器学习 深度学习 物流 用户系统 电商 画图 画布(canvas) 社交 签到 联网 读书 资讯 阅读 预订

官方QQ群

小程序开发群:74052405

大数据开发群: 952493060

近期文章

  • MQTT完全解析和实践
  • 解决运行Selenium报错:self.driver = webdriver.Chrome(service=service) TypeError: __init__() got an unexpected keyword argument ‘service’
  • python 3.6使用mysql-connector-python报错:SyntaxError: future feature annotations is not defined
  • 详解Python当中的pip常用命令
  • AUTOSAR如何在多个供应商交付的配置中避免ARXML不兼容?
  • C++thread pool(线程池)设计应关注哪些扩展性问题?
  • 各类MCAL(Microcontroller Abstraction Layer)如何与AUTOSAR工具链解耦?
  • 如何设计AUTOSAR中的“域控制器”以支持未来扩展?
  • C++ 中避免悬挂引用的企业策略有哪些?
  • 嵌入式电机:如何在低速和高负载状态下保持FOC(Field-Oriented Control)算法的电流控制稳定?

文章归档

  • 2025年7月
  • 2025年6月
  • 2025年5月
  • 2025年4月
  • 2025年3月
  • 2025年2月
  • 2025年1月
  • 2024年12月
  • 2024年11月
  • 2024年10月
  • 2024年9月
  • 2024年8月
  • 2024年7月
  • 2024年6月
  • 2024年5月
  • 2024年4月
  • 2024年3月
  • 2023年11月
  • 2023年10月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年6月
  • 2023年5月
  • 2023年4月
  • 2023年3月
  • 2023年1月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年7月
  • 2018年6月

分类目录

  • Android (73)
  • bug清单 (79)
  • C++ (34)
  • Fuchsia (15)
  • php (4)
  • python (45)
  • sklearn (1)
  • 云计算 (20)
  • 人工智能 (61)
    • chatgpt (21)
      • 提示词 (6)
    • Keras (1)
    • Tensorflow (3)
    • 大模型 (1)
    • 智能体 (4)
    • 深度学习 (14)
  • 储能 (44)
  • 前端 (4)
  • 大数据开发 (490)
    • CDH (6)
    • datax (4)
    • doris (31)
    • Elasticsearch (15)
    • Flink (78)
    • flume (7)
    • Hadoop (19)
    • Hbase (23)
    • Hive (41)
    • Impala (2)
    • Java (71)
    • Kafka (10)
    • neo4j (5)
    • shardingsphere (6)
    • solr (5)
    • Spark (99)
    • spring (11)
    • 数据仓库 (9)
    • 数据挖掘 (7)
    • 海豚调度器 (10)
    • 运维 (34)
      • Docker (3)
  • 小游戏代码 (1)
  • 小程序代码 (139)
    • O2O (16)
    • UI控件 (5)
    • 互联网类 (23)
    • 企业类 (6)
    • 地图定位 (9)
    • 多媒体 (6)
    • 工具类 (25)
    • 电商类 (22)
    • 社交 (7)
    • 行业软件 (7)
    • 资讯读书 (11)
  • 嵌入式 (71)
    • autosar (63)
    • RTOS (1)
    • 总线 (1)
  • 开发博客 (16)
    • Harmony (9)
  • 技术架构 (6)
  • 数据库 (32)
    • mongodb (1)
    • mysql (13)
    • pgsql (2)
    • redis (1)
    • tdengine (4)
  • 未分类 (6)
  • 程序员网赚 (20)
    • 广告联盟 (3)
    • 私域流量 (5)
    • 自媒体 (5)
  • 量化投资 (4)
  • 面试 (14)

功能

  • 登录
  • 文章RSS
  • 评论RSS
  • WordPress.org

All Rights Reserved by Gitweixin.本站收集网友上传代码, 如有侵犯版权,请发邮件联系yiyuyos@gmail.com删除.