|
【济南校区】前端就业班笔记服务器与Ajax:day02
apache安装配置安装安装路径D:\wamp
配置根路径默认的网站根路径是安装目录的www子目录（D:\wamp\www），如果不想使用默认目录，可以自己配置。配置方式如下： 找到文件D:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 或者打开如下文件（实际是同一个文件）
在文件中搜索DocumentRoot，找到239行位置 修改根路径为如下形式：(如果要配置虚拟主机，这里配置成根路径；如果不配置根路径，可以配置成D:\ajax；现在配置的是虚拟主机形式；两个位置应该保持一致)
配置虚拟主机配置虚拟主机可以配置多个网站（域名和网站目录对应），配置步骤如下 开启虚拟主机辅配置，在httpd.conf 中找到如下位置,然后把前面的井号去掉 配置虚拟主机，打开conf/extra/httpd-vhosts.conf 分别修改以下三项，其它项无需指定。 DocumentRoot "E:/www/example" ServerName "example.com " ServerAlias "www.example.com" 修改DNS（hosts）文件(C:\Windows\System32\drivers\etc\hosts), 添加如下内容： 127.0.0.1 example.com 重启apache
配置多个虚拟主机的实例如下：httpd-vhosts.conf文件配置
hosts文件配置
使用Ajax异步请求GET请求：
[JavaScript] 纯文本查看 复制代码 <script type="text/javascript">
/**
*@author 传智播客
*/
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var uname = document.getElementById('username').value;
var pw = document.getElementById('password').value;
// 使用Ajax发送请求需要如下几步：
// 1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2、准备发送 /* 参数一：请求方式（get获取数据；post提交数据）
参数二：请求地址
参数三：同步或者异步标志位，默认是true表示异步，false表示同步
如果是get请求那么请求参数必须在url中传递
*/
xhr.open('get','./01check.php?username='+uname+'&password='+pw,true);
// 3、执行发送动作
xhr.send(null);
// 4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
var info = document.getElementById('info');
if(data == '1'){
info.innerHTML = '登录成功';
}else if(data == '2'){
info.innerHTML = '用户名或者密码错误';
}
}
}
}
}
}
</script>
[HTML] 纯文本查看 复制代码 <body>
<form>
用户名：
<input type="text" name="username" id="username"><span id="info"></span>
<br> 密码：
<input type="text" name="password" id="password">
<input type="button" value="登录" id="btn">
</form>
</body>
GET请求数据：
[PHP] 纯文本查看 复制代码 <?php
$uname = $_GET['username'];
$pw = $_GET['password'];
if($uname == 'admin' && $pw == '123'){
echo '1';
}else{
echo '2';
}
?>
Ajax兼容处理：
[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//标准
}else{
xhr = new ActiveXObject("Microsoft");//IE6
}
Ajax中文处理：[JavaScript] 纯文本查看 复制代码 /**
*@author 传智播客
*/
var param = 'username='+uname+'&password='+pw;
xhr.open('get','./01check.php?'+encodeURI(param),true);
POST请求：
[JavaScript] 纯文本查看 复制代码 /**
* @author 传智播客
*/
// 1、创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//标准
}else{
xhr = new ActiveXObject("Microsoft");//IE6
}
// 2、准备发送
var param = 'username='+uname+'&password='+pw;
xhr.open('post','post.php',false);
// 3、执行发送动作
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);//post请求参数在这里传递，并且不需要转码
// 4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
POST请求数据
[PHP] 纯文本查看 复制代码 <?php
$uname = $_POST['username'];
$pw = $_POST['password'];
if($uname == 'admin' && $pw == '123'){
echo 1;
}else{
echo $uname;
}
?>
解析xml数据
[JavaScript] 纯文本查看 复制代码 xhr.open('post','xml.php',true);
// 3、执行发送动作
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);//post请求参数在这里传递，并且不需要转码
// 4、指定回调函数
// 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseXML;
var bookList = data.getElementsByTagName('booklist');
// var books = bookList[0].childNodes;
var books = bookList[0].children;
var book1 = books[0];
// console.log(books[0].nodeType);
// console.log(books[1].nodeType);
// console.log(book1);
// var name = book1.children[0].innerHTML;
// var author = book1.children[1].innerHTML;
// var desc = book1.children[2].innerHTML;
var name = book1.children[0].firstChild.wholeText;
var author = book1.children[1].firstChild.wholeText;
var desc = book1.children[2].firstChild.wholeText;
console.log(name,author,desc);
}
}
}
}
请求的xml数据：
[PHP] 纯文本查看 复制代码 <?php
header("Content-Type:text/xml;");//这里设置响应头信息，保证浏览器可以把相应内容识别为xml文件类型
$arr = array();
$arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀伐纷争的年代");
$arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事");
$arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教斗争");
$arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影");
?>
<?xml version="1.0" encoding="utf-8" ?>
<booklist>
<book>
<name><?php echo $arr[0]['name'] ?></name>
<author><?php echo $arr[0]['author'] ?></author>
<desc><?php echo $arr[0]['desc'] ?></desc>
</book>
<book>
<name><?php echo $arr[1]['name'] ?></name>
<author><?php echo $arr[1]['author'] ?></author>
<desc><?php echo $arr[1]['desc'] ?></desc>
</book>
<book>
<name><?php echo $arr[2]['name'] ?></name>
<author><?php echo $arr[2]['author'] ?></author>
<desc><?php echo $arr[2]['desc'] ?></desc>
</book>
<book>
<name><?php echo $arr[3]['name'] ?></name>
<author><?php echo $arr[3]['author'] ?></author>
<desc><?php echo $arr[3]['desc'] ?></desc>
</book>
</booklist>
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！ 黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
