Ajax+PHP快速上手及简单应用说明

by admin on 2020年1月3日

简介: Ajax 由 HTML、JavaScript™技术、DHTML 和 DOM
组成,这一杰出的方法可以将笨拙的Web 界面转化成交互性的 Ajax 应用程序。

PHP是一种创建动态交互性站点的服务器端脚本语言,优势:PHP脚本语言应用广泛,开源免费,最重要的是入门简单,容易掌握。

最近打算开始攒点技术文章,主要是我对一些常见技能的学习总结。

首先我们来了解怎么在javascrīpt中创建这个对象:
var xmlHttp = new XMLHttpRequest();
这行简单的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 对象。但是对于市场占有率达到70%的IE来说,这种方法是不行的,而不同的IE版本还有不同的创建方法,所以我们需要在IE下面使用下面两种创建对象的办法:
复制代码 代码如下:
try { 
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);//针对较新的浏览器 
} catch (err) { 
try { 
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);//针对较老的浏览器 
} catch (err2) { 
xmlHttp = false; 


即使这样,我们也无法预料有些浏览器可能无法创建这个对象,所以在创建不成功的情况下,我们还要加上一句:

对于Ajax,最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开对这个对象的操作。
创建XMLHttpRequest对象 对于IE浏览器:
复制代码 代码如下:
xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP’);

PHP能够生成动态页面内容

如题,写作的目的是为了“快速上手”,因为某些技术在实际工作中并不会经常用到,也是怕自己容易忘,总结一些用法一方面方便自己回顾,一方面以方便其他相关技术的初学者快速了解并使用这项技术。

if (!xmlHttp){
alert(“无法创建 XMLHttpRequest 对象!”);
}
结合起来就是:

对于其他浏览器:
复制代码 代码如下:
xmlHttp = new XMLHttpRequest();

PHP能够创建、打开、读取、写入、删除以及关闭服务器上的文件

文章会从实际应用的角度,结合实际代码和调试结果,方便阅读理解。

复制代码 代码如下:
var xmlHttp = false; 
try { 
xmlHttp = new XMLHttpRequest(); 
} catch (trymicrosoft) { 
try { 
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”); 
} catch (othermicrosoft) { 
try { 
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); 
} catch (failed) { 
xmlHttp = false; 



if (!xmlHttp){ 
alert(“无法创建 XMLHttpRequest 对象!”); 

不同的浏览器对javascript中的XMLHttpRequest对象的支持是不一样的,所以需要根据情况做一下判断。

PHP能够接收表单数据

预计涉及的技能如下:

然后,让我们建立一个函数getInfo(),打开异步请求:

XMLHttpRequest对象相关方法  
打开请求
复制代码 代码如下:
XMLHttpRequest.open(传递方式,地址,是否异步请求)

PHP能够发送并取回cookies

1.ReactiveCocoa

复制代码 代码如下:
function getInfo() { 
var num = document.getElementById(“num”).value;//获得表单的数据 
var url = “/ajax/1.php?n=” + escape(num); 
xmlHttp.open(“GET”, url, true);//这里的true代表是异步请求 

一旦用 open() 配置好之后,就可以发送请求了。虽然可以使用 send() 发送数据,但也能通过 URL 本身发送数据。事实上,在大部分GET 请求中,用 URL 发送数据要容易得多,所以这里用null作为send()的参数就可以了。url地址里面的php文件是被请求来处理所需要数据的php文件,就像我们平时用PHP的时候一样,后面的参数可以加多个,并用&分隔开来。

准备就绪执行
复制代码 代码如下:
XMLHttpRequest.onreadystatechange

PHP能够添加、删除、修改数据库中的数据

2.CoreData

xmlHttp.send(null);
在发送了数据之后,我们需要用回调方法来获得服务器的状态,所以就用到了onreadystatechange 属性。

获取执行结果
复制代码 代码如下:
XMLHttpRequest.responseText

PHP能够限制用户访问网站中的某些页面

3.NSThread

xmlHttp.onreadystatechange = updatePage;
此语句已经要放在send()语句前面,这样才会有效,后面的updatePage是处理返回信息的一个函数。完整的getInfo()如下:

一个简单的php+Ajax的例子: 首先是test.js文件:
复制代码 代码如下:
var xmlHttp;
function S_xmlhttprequest(){
 if(window.ActiveXObject){
  xmlHttp=new ActiveXObject(‘Microsoft.XMLHTTP’);
 }else if(window.XMLHttpRequest){
  xmlHttp=new XMLHttpRequest();
 }
}
function php100(url){
 S_xmlhttprequest();
 xmlHttp.open(“GET”,”do.php?id=”+url,true);
 xmlHttp.onreadystatechange=byphp;
 xmlHttp.send(null);
}
function byphp(){
 var byphp100=xmlHttp.responseText;
 document.getElementById(‘php100’).innerHTML=byphp100;
}

能够运行于各种平台,几乎兼容所有WEB服务器,支持多种数据库

4.GCD

复制代码 代码如下:
function getInfo() { 
var num = document.getElementById(“num”).value;//获得表单的数据 
var url = “/ajax/1.php?n=” + escape(num); 
xmlHttp.open(“GET”, url, true);//这里的true代表是异步请求 
xmlHttp.onreadystatechange = updatePage; 
xmlHttp.send(null); 

然后是执行php操作的文件,do.php
复制代码 代码如下:

1.我们想要运行PHP,首先要有个web服务器,一般可以在本地部署一个服务器用来测试。所以需要下载个XAMPP,我们在百度搜索apache
friends,直接打开第一个链接,然后毫不犹豫的下载最新版本(PHP7.0.9),下载后执行安装。

5.runtime

我们还需要在html里面来触发这个函数:

$id=@$_GET[id];
for($i=1;$i<10;$i++){
 echo $id;
}

图片 1

6.block

下面我们需要来编写updatePage()这个函数:

然后是前端显示页面,test.html
复制代码 代码如下:

图片 22.

。。。

function updatePage(){
if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
document.getElementById(“city”).value = response;
}
}
上面这段代码里面的readyState是服务器返回的一个状态,4这个状态表示请求已经发送,并处理完毕。responseText是获得服务器返回的信息,然后通过javascrīpt赋给ID为city的表单。

1 ||
2 ||
3
<>

2.现在来配置XAMPP来部署一个本地服务器,打开只需要启用Apache服务,下面我就启动成功了。如果启用不成功,Port(s)没有数据显示,就证明你监听的PC端口被占用,你可以在Config的里第一个选项进行监听端口的更改,找到记事本里的Listen
8080命令改后缀,这里我把监听端口改成空闲的8080了。

文章生产顺序不定,看我自己的空闲时间和心情lol..

到此,一个简单的Ajax程序就完成了,完整的javascrīpt代码如下:

图片 3

var xmlHttp = false;
try {
xmlHttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
xmlHttp = false;
}
}
}
if (!xmlHttp){
alert(“无法创建 XMLHttpRequest 对象!”);
}

3.下面来打开Dreamweaver建一个服务器站点。站点配置:本地站点文件夹一定要选择你装Xampp路径的htdocs的目录里。

function getInfo() {
var num = document.getElementById(“num”).value;//获得表单的数据
var url = “/ajax/1.php?n=” + escape(num);
xmlHttp.open(“GET”, url, true);//这里的true代表是异步请求
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}

图片 4

function updatePage(){
if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
document.getElementById(“city”).value = response;
}
}
这里还缺一个php文件,由于处理的方式不一样,写法也不一样,而且这不是Ajax的主要部分,所以这里就不放代码了。只要记住php是输出并返回所需要的数据就可以了。

4.添加服务器配置:

好久没更新,今天看到这教程,对初学者挺适合.

图片 5

图片 6

这样站点就设置好了,然后在站点文件夹创建server.php,脚本如下

<?php
//设置页面内容是html编码格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); 
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Credentials:true'); 
header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8");


//定义一个多维数组,包含员工的信息,每条员工信息为一个数组
$staff = array
(
array("name" => "乔布斯", "number" => "101", "sex" => "男", "job" => "IOS开发工程师"),
array("name" => "比尔盖茨", "number" => "102", "sex" => "男", "job" => "微软开发工程师"),
array("name" => "陈美丽", "number" => "103", "sex" => "女", "job" => "安卓开发工程师"),
array("name" => "黄力", "number" => "104", "sex" => "男", "job" => "Java开发工程师"),
array("name" => "车神", "number" => "105", "sex" => "男", "job" => "游戏开发工程师"),
array("name" => "测试猫", "number" => "106", "sex" => "男", "job" => "web前端开发工程师")
);


//判断如果是get请求,则进行搜索;如果是POST请求,则进行新建
//$_SERVER是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}


//通过员工编号搜索员工
function search(){
//检查是否有员工编号的参数
//isset检测变量是否设置;empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo '{"success":false,"msg":"参数错误"}';
return;
}
//函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。
//global 关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"];
$result = '{"success":false,"msg":"没有找到员工。"}';

//遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = '{"success":true,"msg":"找到员工:员工编号:' . $value["number"] . 
',员工姓名:' . $value["name"] . 
',员工性别:' . $value["sex"] . 
',员工职位:' . $value["job"] . '"}';
break;
}
}
 echo $result;
}


//创建员工
function create(){
//判断信息是否填写完全
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["number"]) || empty($_POST["number"])
|| !isset($_POST["sex"]) || empty($_POST["sex"])
|| !isset($_POST["job"]) || empty($_POST["job"])) {
echo '{"success":false,"msg":"参数错误,员工信息填写不全"}';
return;
}
//TODO: 获取POST表单数据并保存到数据库

//提示保存成功
echo '{"success":true,"msg":"员工:' . $_POST["name"] . ' 信息保存成功!"}';
}

?>

我们可以在server.php文件数组$staff里的数据进行查询,并且可以实现添加数据的功能,下面来创建demo.html

<style>
body,input,button,select,h1{
font-size:20px;
line-height:18px;
}
</style>


<script>

window.onload=function(){
document.getElementById("search").onclick=function(){//查询数据
//发送Ajax查询请求并处理
var request=new XMLHttpRequest();
//open("方法(GET查询,POST添加)","打开的文件数据",处理方式(同步为false异步为true,不填默认为true));
request.open("GET","server.php?number="+document.getElementById('keyword').value);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){//当服务器请求完成
if(request.status===200){//status==200为服务器请求成功
 var data=JSON.parse(request.responseText);
 if(data.success){//数据填写符合要求
document.getElementById('searchResult').innerHTML=data.msg;
 }else{//数据填写不符号要求
document.getElementById('searchResult').innerHTML="出现错误:"+data.msg;
 } 
}else{//服务器请求失败
 alert("发生错误:"+request.status);
}
}
}
}

document.getElementById("save").onclick=function(){//添加数据
//发送Ajax添加数据请求并处理
var request=new XMLHttpRequest();
//open("方法(GET查询,POST添加)","打开的文件数据",处理方式(同步为false异步为true,不填默认为true));;
request.open("POST","server.php");
//定义data取得用户所填写的数据,并且send(data)到服务器
var data="name="+document.getElementById("staffName").value
 +"&number="+document.getElementById("staffNumber").value
 +"&sex="+document.getElementById("staffSex").value
 +"&job="+document.getElementById("staffJob").value;
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在POST方法里必写,否则添加数据不起作用
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){//当服务器请求完成
if(request.status===200){//status==200为服务器请求成功
 var data=JSON.parse(request.responseText);
 if(data.success){//数据填写符合要求
document.getElementById('createResult').innerHTML=data.msg;
 }else{//数据填写不符合要求
document.getElementById('createResult').innerHTML="出现错误:"+data.msg;
 } 
}else{//服务器请求失败
 alert("发生错误:"+request.status);
}
}
}
}
}
</script>

<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword"/>
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工创建</h1>
<label>请输入员工姓名:</label>
<input type="text" id="staffName"/><br>
<label>请输入员工编号:</label>
<input type="text" id="staffNumber"/><br>
<label>请输入员工性别:</label>
<select id="staffSex">
 <option>男</option>
 <option>女</option>
</select><br>
<label>请输入员工职位:</label>
<input type="text" id="staffJob"/><br>
<button id="save">保存</button>
<p id="createResult"></p>
</body>

图片 7

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Ajax异步传输与PHP实现交互示例
  • php
    ajax无刷新上传图片实例代码
  • php+ajax实现无刷新动态加载数据技术
  • PHP+ajax 无刷新删除数据
  • php+ajax实现无刷新分页的方法
  • php+ajax实时刷新简单实例
  • Ajax+php数据交互并且局部刷新页面的实现详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图