A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 小鲁哥哥 黑马粉丝团   /  2018-2-9 10:14  /  1408 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

【济南校区】前端就业班笔记服务器与Ajax:day02

apache安装配置安装
安装路径D:\wamp
配置根路径
默认的网站根路径是安装目录的www子目录(D:\wamp\www),如果不想使用默认目录,可以自己配置。配置方式如下:
找到文件D:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 或者打开如下文件(实际是同一个文件)
2.png
在文件中搜索DocumentRoot,找到239行位置
修改根路径为如下形式:(如果要配置虚拟主机,这里配置成根路径;如果不配置根路径,可以配置成D:\ajax;现在配置的是虚拟主机形式;两个位置应该保持一致)
1.png
配置虚拟主机
配置虚拟主机可以配置多个网站(域名和网站目录对应),配置步骤如下
开启虚拟主机辅配置,在httpd.conf 中找到如下位置,然后把前面的井号去掉
3.png
配置虚拟主机,打开conf/extra/httpd-vhosts.conf
4.png
分别修改以下三项,其它项无需指定。
    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
127.0.0.1 www.example.com
重启apache
配置多个虚拟主机的实例如下:httpd-vhosts.conf文件配置
5.png
hosts文件配置
6.png

使用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

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马