Ajax-05(2019/5/31)

Ajax

Ajax，是 Asynchronous JavaScript + XML 的简写。
这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更
好的用户体验。

一、 XMLHttpRequest

**
**Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)，这是由微软首先引入
的一个特性，其他浏览器提供商后来都提供了相同的实现。在 XHR 出现之前，
Ajax 式的通信必须借助一些手段来实现，大多数是使用隐藏的框架或内嵌框架。
XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。
能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，
在不刷新网页的情况下，更新服务器最新的数据。
虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，也就是说这
种技术不一定使用 XML。
IE7+、 Firefox、 Opera、 Chrome 都支持原生的 XHR 对象，在这些浏览器
中创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。

var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest

1.在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：

要发送的请求类型(get、 post)、 请求的 URL 和表示是否异步。
open()方法并不会真正发送请求，而只是启动一个请求以备发送。

通过 send()方法进行发送请求， send()方法接受一个参数，作为请求主体
发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发
送到服务器上。
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属
性。那么一共有四个属性：

image.png

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般
情况 HTTP 状态代码为 200
作为成功的标志。除了成功的状态代码，还有一些别的：

image.png

2.同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调
用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发
readystatechange 事件。这个属性有五个值：

image.png

3.发送的请求的步骤：

1)、得到XMLHttpRequest对象

new XMLHttpRequest()

2)、准备请求 open(请求类型GET/POST,请求的URL,是否异步)

xhr.open(请求类型GET/POST,请求的URL,是否异步);

3)、发送请求 send([参数])

xhr.send([参数])

注：如果是GET请求，请求的参数设置在url的后面，所以send(null)

如果是POST请求，无参数设置为null，有参数则设置参数即可

4)、判断响应状态，得到后台响应

xhr.responseText;

4.测试

1）Ajax同步测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax同步测试</title>
</head>
<body><!--
         Ajax:
            异步无刷新技术。能够请求后台发送和获取数据，而无需卸载页面（刷新页面）。

            核心对象：
               XMLHttpRequest对象
               var  xhr = new XMLHttpRequest()
            在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的 请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正发送请求，而只是启动一个请求以备发送。
            通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。


            发送的请求的步骤：
               1、得到XMLHttpRequest对象
                  new XMLHttpRequest()
               2、准备请求   open(请求类型GET/POST,请求的URL,是否异步)
                  xhr.open(请求类型GET/POST,请求的URL,是否异步);
               3、发送请求  send([参数])
                  xhr.send([参数])
                  注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
                     如果是POST请求，无参数设置为null，有参数则设置参数即可
               4、判断响应状态，得到后台响应
                  xhr.responseText;
      -->

</body>
<script type="text/javascript">
    //1.得到XMLHttpRequest对象
    var xhr=new XMLHttpRequest();
    console.log(xhr);
    //2.准备请求，open（请求类型GET/POST,请求的URL是否是异步，
    xhr.open("GET","js/data.json?uname=zs",false);
    console.log("open....");
    //3.发送请求 send参数
    xhr.send(null);
    console.log("send....");
    //4.判断响应状态，得到后台响应
    if(xhr.status==200){
        var responseTxt =xhr.responseText;
        console.log(responseTxt);
    }else{
        alert("状态码："+xhr.status+",错误信息："+xhr.responseText);
    }
</script>
</html>

2）Ajax异步测试（模拟服务器 js/data.json）

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax异步测试</title>
</head>
<body>
<!--
同步调用固然简单，但使用异步调用才是我们真正常用的手段。
使用异步调的时候，检测 readyState 属性,每当 readyState 属性改变时，触发readystatechange 事件。
这个属性有五个值：
值        状态        说明
0        未初始化   尚未调用 open()方法
1        启动        已经调用 open()方法，但尚未调用 send()方法
2        发送        已经调用 send()方法，但尚未接受响应
3        接受        已经接受到部分响应数据
4        完成        已经接受到全部响应数据，而且可以使用
-->
</body>
<script type="text/javascript">
    //1.得到XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    console.log(xhr);
    //2.准备请求   open(请求类型GET/POST,请求的URL,是否异步)
    xhr.open("GET","js/data.json",true);//异步请求
    console.log("open...异步");
    // 3、发送请求   send(参数)  //xhr.send("uname=zhangsan&upwd=123456"); // Post请求有参数，则设置
    xhr.send(null);
    console.log("send...");
    //4，判断响应状态，得到后台响应得到后台响应  xhr.responseText;
    // 如果是异步请求，需要先知道数据是否完全响应
    // 监听readyState的值的变化
    xhr.onreadystatechange=function(){
        console.log(xhr.readyState);//检测 readyState 属性,每当 readyState 属性改变时，触发readystatechange 事件。这个属性有五个值：
        //判断是否完全响应，即readyState的值为4
        if(xhr.readyState==4){
            if(xhr.status==200){
                var responseTxt =xhr.responseText;
                console.log(responseTxt);
            }else{
                alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
            }
        }
    }
     console.log("异步测试完成。。。")




</script>
</html>

二、 GET 与 POST

**
**在提供服务器请求的过程中，有两种方式，分别是： GET 和 POST。在 Ajax
使用
的过程中， GET 的使用频率要比 POST 高。
1.GET 请求
GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，
可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。
xhr.open('get','diner/login?'+'name=Lee&age=100',true);
通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。
特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中
文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可， AJAX 返回的
数据为 UTF-8。

//一个通用的 URL 提交函数
function addURLParam(url, name, value) {
//判断的 url 是否有已有参数
url += (url.indexOf('?') == -1 ? '?' : '&');
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}

当没有 encodeURIComponent()方法时，在一些特殊字符比如"&"，会出现
错误导致无法获取。
2.POST 请求
POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是
使用的 POST 传输方式。
xhr.open('post', 'diner/login', true);
而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法
向服务器提交数据。
xhr.send('name=Lee&age=100');
一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的
处理。因为 POST 请求和 Web 表单提交是不同的，需要使用 XHR
来模仿表单提交。
xhr.setRequestHeader('Content-Type','application/x-www-form-urle
ncoded');
从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较， GET
最多比 POST 快两倍。

3.tomcat服务器

post 请求，需要有服务器，暂时使用 tomcat
将 tomcat 压缩包在某个盘下解压
将存放了 json 文件的项目放入 webapps 文件夹下
在 bin 目录下，打开 startup.bat，启动服务

三、封装 Ajax

因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是
POST；我们需要封装一个 Ajax 函数，来方便我们调用。

1、得到XMLHttpRequest对象

new XMLHttpRequest()

2、打开请求

open(请求类型GET/POST,请求的URL,是否异步) 注：三个参数都是由调用者传递

注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；

3、发送请求 send([参数])

xhr.send([参数])

注：如果是GET请求，请求的参数设置在[url]{.underline}的后面，所以send(null)

如果是POST请求，无参数设置为null，有参数则设置参数即可

4、判断响应状态，得到后台响应

xhr.responseText;

注：判断是否是异步请求，如果是同步则直接获取响应数据；如果是异步，则需要先判断数据是否完全响应（readyState==4），再获取响应数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>封装Ajax</title>
</head>
<body>
    <!-- 
    
        调用者：
            请求类型    GET/POST
            请求路径
            请求参数
            是否异步
    
        封装Ajax
            1、得到XMLHttpRequest对象
                new XMLHttpRequest()
            2、打开请求   open(请求类型GET/POST,请求的URL,是否异步)  注：三个参数都是由调用者传递
                注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
            3、发送请求   send([参数]) 
                xhr.send([参数])
                注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
                      如果是POST请求，无参数设置为null，有参数则设置参数即可
            4、判断响应状态，得到后台响应
                xhr.responseText;
                注：判断是否是异步请求，如果是同步则直接获取响应数据；如果是异步，则需要先判断数据是否完全响应（readyState==4），再获取响应数据
    
     -->
</body>
<script type="text/javascript">

    // 用户A
    var userA = {
        type:"GET",
        url:"js/data.json?a=1",
        data:{
            uname:"zhangsan",
            upwd:"123456"
        },
        async:true,
        success:function(result){
            console.log(result);
        },
        error:function(result) {
            console.log(result);
        }
    };
    ajax(userA);
    
    
    // 用户B
    var userB = {
        type:"POST",
        url:"js/data.json",
        data:{
            uname:"zhangsan",
            upwd:"123456"
        },
        async:false,
        success:function(result){
            alert(result);
        },
        error:function(result) {
            console.log(result);
        }
    };
    ajax(userB);
    
    
    
    
    ajax({
        type:"POST",
        url:"js/data.json",
        data:{
            uname:"zhangsan",
            upwd:"123456"
        },
        async:false,
        success:function(result){
            alert(result);
        },
        error:function(result) {
            console.log(result);
        }
    });
    
    
    

    /**
     *封装Ajax
        1、得到XMLHttpRequest对象
            new XMLHttpRequest()
        2、打开请求   open(请求类型GET/POST,请求的URL,是否异步)  注：三个参数都是由调用者传递
            注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
        3、发送请求   send([参数]) 
            xhr.send([参数])
            注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
                  如果是POST请求，无参数设置为null，有参数则设置参数即可
        4、判断响应状态，得到后台响应
            xhr.responseText;
            注：判断是否是异步请求，如果是同步则直接获取响应数据；如果是异步，则需要先判断数据是否完全响应（readyState==4），再获取响应数据
     */
    function ajax(obj) {
        // 1、得到XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        
        // 2、打开请求   open(请求类型GET/POST,请求的URL,是否异步)  注：三个参数都是由调用者传递
        // 注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
        /*
            格式化参数
            data:{
                uname:"zhangsan",
                upwd:"123456"
            }
            ---->  uname=zhangsan&upwd=123456
        */
        // 格式化参数
        obj.data = formatParam(obj.data);
        // 判断是否是GET请求
        if (obj.type.toUpperCase() == "GET") { // GET请求
            // 拼接参数
            obj.url += (obj.url).indexOf("?") > -1 ? "&" +obj.data : "?" +obj.data;
        }
        xhr.open(obj.type,obj.url,obj.async);
        
        
        // 3、发送请求    send([参数]) 
        if (obj.type.toUpperCase() == "POST") { // POSTt请求
            // 模拟表单提交
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // 发送请求
            xhr.send(obj.data);
            
        } else { // GET请求
            xhr.send(null);
        }
        
        
        
        // 4、判断响应状态，得到后台响应
        // 判断是否是异步请求
        if (obj.async) { // 异步请求
            // 如果是异步请求，需要先知道数据是否完全响应
            // 监听readyState的值的变化
            xhr.onreadystatechange = function() {
                // console.log(xhr.readyState);
                // 判断是否完全响应，即readyState的值等于4
                if (xhr.readyState == 4) {
                    callback();
                }
            }
            
        } else { // 同步请求
            callback();
        }
        
        /*
            获取响应结果
         */
        function callback() {
            if (xhr.status == 200) {
                var responseTxt = xhr.responseText;
                // console.log(responseTxt);
                
                // 调用成功的回调函数
                obj.success(responseTxt);
                
            } else {
                // alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
                // 调用失败的回调函数
                obj.error("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
            }
        }
        
    }
            
            
    /**
     * 将对象形式的参数转换成字符串 
            格式化参数
            data:{
                uname:"zhangsan",
                upwd:"123456"
            }
            ---->  uname=zhangsan&upwd=123456
     */
    function formatParam(data) {
        var arr = [];
        for(var key in data) {
            //console.log(key,data[key]);
            var str = key+"="+data[key]; // uname=zhangsan
            // 将数组追加到数组中
            arr.push(str);
        }
        // console.log(arr);
        // 将数组转换成字符串
        var params = arr.join("&");
        return params;
    }
</script>

</html>

四、Jquery 的 ajax

1.$.ajax()

**
**jquery 调用 ajax 方法：
格式： $.ajax({});
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$.ajax()</title>
</head>
<body>
    <!-- 
        1.$.ajax()
            jquery 调用 ajax 方法：
            格式：$.ajax({});
            参数：
                type：请求方式 GET/POST
                url：请求地址 url
                async：是否异步，默认是 true 表示异步
                data：发送到服务器的数据
                dataType：预期服务器返回的数据类型
                contentType：设置请求头
                success：请求成功时调用此函数
                error：请求失败时调用此函数
     -->
</body>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $.ajax({
        type:"get",
        url:"js/data.json",
        data:{
            
        },
        dataType:"json", // 预期返回的数据的类型
        success:function(data){
            console.log(data);
        }
    });
    
    $.ajax({
        type:"post",
        url:"js/data.json",
        data:{
            
        },
        dataType:"json", // 预期返回的数据的类型
        success:function(data){
            console.log(data);
        }
    });

</script>

</html>

2.$.get()

**
**这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

1.请求 json 文件，忽略返回值

$.get('../js/cuisine_area.json');

2.请求 json 文件，传递参数，忽略返回值

$.get('../js/cuisine_area.json',{name:"tom",age:100});

3.请求 json 文件,拿到返回值,请求成功后可拿到返回值

$.get('../js/cuisine_area.json',function(data){

console.log(data)

});

4.请求 json 文件,传递参数,拿到返回值

$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){

console.log(data)

});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$.get()</title>
</head>
<body>
<!--
    GET请求
        1.请求 json 文件，忽略返回值
            $.get('../js/cuisine_area.json');
        2.请求 json 文件，传递参数，忽略返回值
            $.get('../js/cuisine_area.json',{name:"tom",age:100});
        3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
            $.get('../js/cuisine_area.json',function(data){
                console.log(data)
            });
        4.请求 json 文件,传递参数,拿到返回值
            $.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
                console.log(data)
            });

 -->
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    /*1.请求 json 文件，忽略返回值  */
    $.get("js/data.json");
    
    /* 2.请求 json 文件，传递参数，忽略返回值 */
    $.get("js/data.json",{"uname":"zhangsan"});
    
    /* 3.请求 json 文件,拿到返回值,请求成功后可拿到返回值 */
    $.get("js/data.json",function(data){
        console.log(data);
    });
    /* 4.请求 json 文件,传递参数,拿到返回值  */
    $.get("js/data.json",{"uname":"zhangsan"},function(data){
        console.log(data);
    });
</script>

</html>

3.$.post()

**
**这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

1.请求 json 文件，忽略返回值

$.post('../js/cuisine_area.json');

2.请求 json 文件，传递参数，忽略返回值

$.post('../js/cuisine_area.json',{name:"tom",age:100});

3.请求 json 文件,拿到返回值,请求成功后可拿到返回值

$.post('../js/cuisine_area.json',function(data){

console.log(data)

});

4.请求 json 文件,传递参数,拿到返回值

$.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){

console.log(data)

});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$.post()</title>
</head>
<body>
<!--
    post请求
        1.请求 json 文件，忽略返回值
            $.post('../js/cuisine_area.json');
        2.请求 json 文件，传递参数，忽略返回值
            $.post('../js/cuisine_area.json',{name:"tom",age:100});
        3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
            $.post('../js/cuisine_area.json',function(data){
                console.log(data)
            });
        4.请求 json 文件,传递参数,拿到返回值
            $.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
                console.log(data)
            });

 -->
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    /*1.请求 json 文件，忽略返回值  */
    $.post("js/data.json");
    
    /* 2.请求 json 文件，传递参数，忽略返回值 */
    $.post("js/data.json",{"uname":"zhangsan"});
    
    /* 3.请求 json 文件,拿到返回值,请求成功后可拿到返回值 */
    $.post("js/data.json",function(data){
        console.log(data);
    });
    /* 4.请求 json 文件,传递参数,拿到返回值  */
    $.post("js/data.json",{"uname":"zhangsan"},function(data){
        console.log(data);
    });
</script>

</html>

4.$.getJSON()

**
**表示请求返回的数据类型是 JSON 格式的 ajax 请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$.getJSON</title>
</head>
<body>
    
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $.getJSON("js/data.json",{},function(data){
        console.log(data);
        console.log(data.uname);
    })
</script>
</html>

5.jsonp

**
**远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
添加属性：
jsonp:'callback'
dataType:'jsonp'

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonp跨域</title>
</head>
<body>
<!-- 
    远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
        普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
        添加属性：
        // jsonp:’callback’
        dataType:’jsonp’
        
        注：访问的远程路径支持跨域

 -->
 
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $.ajax({
        type:"get",
        url:"http://iservice.itshsxt.com/restaurant/find",
        data:{
            cuisine:"Bar"
        },
        dataType:"jsonp", // 跨域处理
        success:function(data){
            console.log(data);
        }
    });
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342

推荐阅读更多精彩内容

  • Ajax的运用
    AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,168评论 0赞 7
  • ajax2019-04-23
    Ajax这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新） 一.实现同步流程： 1、得到核心对象XMLHt...
    孤叹汝念之殇阅读 645评论 0赞 0
  • XMLHttpRequest
    Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是...
    changxiaonan阅读 2,217评论 0赞 2
  • 前端面试题之 Ajax
    谈谈你对 ajax 的认识？Ajax 的全称是 Asynchronous JavaScript and XML 中...
    Drazy嘀嘀嘀阅读 225评论 0赞 1
  • 第二次面试笔试题
    1、List<T>,List >,List 怎么相互转化？2、如何自定义异常，抛出异常，通过什么关键字判断具体异常...
    小雨同志贰2岁阅读 325评论 2赞 1