html+js+php一次原始的Ajax请求示例

今天给大家呈现一个原始的Ajax请求过程，虽然jquery的ajax要比原始的写法容易得多，我们还是应该了解原始的写法，下面我分为html、js、php三个小文件来展示，数据库自己写。

首先是html：


代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一次简单的Ajax请求</title>
<script language="javascript" src="js/ajaxTest.js"></script>
</head>
<body>
用户名：<input id="userName" type="text"></input>
密码：<input id="passWord" type="password"></input>
<span id="showInputError" style="color:red;font-weight: bold;"></span><br>
<input type="button" value="登录" onclick="showSelect()">
</body>
</html>

然后是js:


代码如下:

/**
* 普通Ajax的完整访问过程
*/
var xmlHttp

function showSelect()//登录按钮点击后执行这个方法
{
var userName=document.getElementById("userName").value;
var passWord=document.getElementById("passWord").value;
if (userName.length==0)//验证输入用户名是否为空
{
document.getElementById("showInputError").innerHTML="用户名不能为空";//提示用户名不能为空
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="ajaxTest.php"//设置要提交action到后台的那个处理请求的文件名
url=url+"?userName="+userName+"&passWord="+passWord//为这个路径加上参数用户名和密码
url=url+"&sid="+Math.random()//为这个路径加上一个随机数
xmlHttp.onreadystatechange=stateChanged//每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息
xmlHttp.open("GET",url,true)//定义请求的参数
xmlHttp.send(null)//发送请求
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")//
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
{ var a= xmlHttp.responseText;//把相应数据赋值给a
if(a=="yes"){
self.location='Main.php';//跳转到Main.php
}else{
document.getElementById("showInputError").innerHTML="用户名或密码错误";//提示用户名或密码错误
}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

最后是php:


代码如下:

<?php
$userName=$_GET["userName"];
$pwd=$_GET["passWord"];
$con = mysql_connect("localhost","root","123456");
mysql_select_db("my_test", $con);
mysql_query("set names utf8");
$sql="SELECT * FROM Userinfo WHERE userName='".$userName."' AND pwd='".$pwd."'";
$result=mysql_query($sql);
$select=mysql_num_rows($result);
$a="no";
if ($select>0){$a="yes";}
echo $a;
mysql_close($con);
?>

赞 (0)

相关推荐

  • JQuery打造PHP的AJAX表单提交实例

    如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源.如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章<使用PHPMailer类库发送电子邮件>. 第一步,创建一个表单HTML页面 这里,我们只展示主要的表单部分HTML结构代码: 复制代码 代码如下: <div id="contact_form"> <form name="contact" method="post" action="

  • php检查是否是ajax请求的方法

    本文实例讲述了php检查是否是ajax请求的方法.分享给大家供大家参考.具体如下: 通过这段代码可以判断用户的请求是否来自AJAX XMLHttpRequest,以区别普通post,get和ajax function isAjax() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')); } 希望本文所述对大家的php程序

  • PHP开发框架kohana中处理ajax请求的例子

    今天分享的是在kohana中处理页面的ajax请求.2步搞定.前提是你的kohana框架已经可以正确运行了,注意下. 1.页面发出请求. 现在主流的javascript框架非jQuery莫属.jQuery对ajax请求也作了封装,这里就以jQuery为例来写个.demo是获取后台json串,并且用each处理.代码大部分是从jqapi搞来的,准确也方便. $.ajax({ url: "/test/json",//test是控制器,json是action,带/是相对站点根目录的意思 da

  • php的ajax简单实例

    php的ajax简单实例

    当输入j后,会触发ajax效果,从后台获取相应的名字中带有j的数据,并展示在suggestions中. 代码实现如下: 实现ajax需要三个文件,一个是html的表单文件,一个是js的核心文件,一个是php的后台文件. 下面的是html文件,当键盘按下时触发showHint方法,在showHint方法中会有ajax的核心内容,实例化,获取地址,获取数据并展示等等. 复制代码 代码如下: <html><head><script src="clienthint.js&q

  • php中如何判断一个网页请求是ajax请求还是普通请求

    如何在php中判断一个网页请求是ajax请求还是普通请求?你可以通过传递参数的方法来实现,例如使用如下网址请求:/path/to/pkphp.com/script.php?ajax在php脚本中使用如下方法判断: 复制代码 代码如下: if(isset($_GET['ajax'])) { ...这是一个ajax请求,然后... } else { ...这不是一个ajax请求,然后... } 通过传递_GET参数的方法简单实现了网页请求的判断.但是如果需要这样的功能,这个方法可能就有弊端,功能需求

  • 在php中判断一个请求是ajax请求还是普通请求的方法

    /path/to/pkphp.com/script.php?ajax 在php脚本中使用如下方法判断: 复制代码 代码如下: if(isset($_GET['ajax'])) { ...这是一个ajax请求,然后... } else { ...这不是一个ajax请求,然后... } 通过传递_GET参数的方法简单实现了网页请求的判断.但是如果需要这样的功能,这个方法可能就有弊端,功能需求如下: 1.通过ajax请求的网页与普通请求的网页内容是不相同的 2.通过ajax请求的网页是为了方便用户操作

  • php判断是否为ajax请求的方法

    本文实例讲述了php判断是否为ajax请求的方法.分享给大家供大家参考,具体如下: 先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以使用 $_SERVER["HTTP_X_REQUESTED_WITH"] 来获取.(注意:中划线换成了下划线,不区分大小写) 由此,我们可以这样来判断是否为 ajax 请求: if(isset($_SERV

  • PHP中如何判断AJAX提交的数据

    如果是ajax请求,以下表达式的值为真 $_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest" 就是一个PHP的环境变量.

  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    html代码(test.html),js在html底部 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test-jquery-ajax-list</title> </head> <body> <div class="main">

  • PHP+Mysql+Ajax+JS实现省市区三级联动

    PHP+Mysql+Ajax+JS实现省市区三级联动

    基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh

随机推荐