前端复习-网络（2-ajax实现篇）

我们需要准备几点：
1.需要一个纯 html +js；
2.php 文件。

那么什么是php呢？

PHP是一种创建动态交互性站点的服务器端脚本语言。它是开源而且免费的，使用的非常广泛（入门简单）

比如我们接触的新闻网站，它里面的每一条新闻都不是存在在我们的电脑里面的，我们需要有一个单独的地方存储，我们的电脑通过网站，查询存储新闻的地方，这个存储新闻的地方，它有存和取这样一些功能，这个存和取的功能一般我们会用服务器端脚本语言去开发。例如 PHP， java， .net等等来开发这样一个后台。

PHP的大概应用：

我并没有学习如何去写php，我只是在网上找了几个文件，以用于测试我的ajax是否可用。下面我们来说明ajax的实现，与如何封装自己的ajax。有关ajax的基础知识我会挑重点解释，其他的，请看我的上一篇文章

第一点、手写最简单的ajax实现操作

我会代码行之间对其进行解释，如果有错误的地方，希望大家可以给我留言。

众所周知，ajxa请求常用的两种方法，如何实现我已经在下面展示了。

    get方法

    var xml = null;
    if(window.XMLHttpRequest){
        xml = new XMLHttpRequest;
    }else{
        xml = new ActiveXObject('Microsoft.XMLHttp')
    }//以上是ajax兼容性的写法，这是一个问题点，希望大家自己去思考，我们共勉

    xml.open('GET' , 'getNews.php' ,true) 
    //GET方法，我的文件名称叫getNews.php，异步请求  
    xml.send();

    xml.onreadystatechange = function () {//状态改变事件触发器
        if(xml.readyState == 4){
            if(xml.status == 200 ){
                dealDate(xml.responseText)
            }
        }
    }//监听对象的状态

    //对象状态（integer），状态值
    //0 = 未初始化，未调用send()方法
    //1 = 读取中，已调用send()，正在发送请求
    //2 = 已读取，send方法执行完成，接收到全部响应内容
    //3 = 交互中，正在解析响应内容
    //4 = 完成，响应内容解析完成

    function dealDate(date){
        var value = JSON.parse(date)
        //将字符串形式的响应数据转换为json格式
        var str = '';
        value.forEach(function(ele , index)  {
            str += '<li>'+ ele.title + "-" + ele.date+ '</li>';
        });
        document.body.innerHTML = str;
    }//GET -> 函数事件，将php文件进行处理


----------


    post方法  （流程和get基本一致，但还是有区别）
    var xml = null;
    if (window.XMLHttpRequest) {
        xml = new XMLHttpRequest;
    } else {
        xml = new ActiveXObject('Microsoft.XMLHttp')
    }//兼容性写法

    xml.open('POST', 'post.php', true)
    xml.setRequestHeader('content-type', 
    'application/x-www-form-urlencoded')
    //设置一个响应头，内容类型->x-www。。。
    xml.send('username=Aeimei&age=18');

    xml.onreadystatechange = function () {
        if (xml.readyState == 4) {
            if (xml.status == 200) {
                console.log(xml.responseText)
                // dealDate(xml.responseText)
                showData(xml.responseText)
            }
        }
    }
    function showData(data) {
        console.log(data)
    }

好了 ajax的具体实现就是这样的了，这里我利用了wampserver，和vscode来完成所有的事情，需要php文件练手的可以在下面留言，我会经常关注我的博客，希望能帮到大家，我们一起进步。
另外大家需要封装自己的ajax，可以提醒我，我会写一遍如何封装他的过程博客。