jq调用ajax的总结

Posted 2022-08-01 wangjian2016

用ajax调用后台总结心得

先来看一个代码样例：

 $.ajax(
    url: 'http://blog2019.applinzi.com/api/blogs',
    type: 'GET',
    contentType: "application/json",
    success: function (data) 
        var html = '';
        console.log(data);
        for (i = 0; i < data.length; i++) 
            html += '<div class="panel panel-primary">' +
                ' <div class="panel-heading">' + data[i].blogText +
                '<div class="f-r">' + getMyDate(Number(data[i].date)) + '</div>' + '</div>' +
                ' <div class="panel-body"  id = "details">' + '<a href = "./Details.html?id=' + data[i]._id + '" target = "_blank">' + data[i].introText + '</a>' + '</div>' +
                '<div class="panel-footer">' + getCategoryNameById(data[i].languageId) + '</div>' + '</div>'
        
        $('.post-wrapper').html(html);
    ,
    error: function (error) 
        debugger;
        console.log(error);
    
);

对于上面的代码，我们来看一下几个主要的参数：

1. type 的请求方式；
2. url请求的url;
3. datetype的数据格式；
4. data请求的数据；
5. success如果请求成功的回调函数

type的请求方式：

type的请求分为POST和GET两种。get与post的区别有很多，但是从我自己的角度来看get和post的区别时：

GET的目的就如同其名字一样是用于获取信息的。它旨在显示出页面上你要阅读的信息。浏览器会缓冲GET请求的执行结果，如果同样的GET请求再次发出，浏览器就会显示缓冲的结果而不是重新运行整个请求。这一流程不同于浏览器的处理过程，但是它是有意设计成这样以使GET调用更有效率。GET调用会检索要显示在页面中的数据，数据不会在服务器上被更改，因此重新请求相同数据的时候会得到相同的结果。

POST方法应该用于你需要更新服务器信息的地方。如某调用要更改保存在服务器上的数据，而从两个同样的POST调用返回
的结果或许会完全不同，因为第二个POST调用的值与第一个的值不相同，这是由于第一个调用已经更新了其中一些值。POST调用通常会从服务器上获取响应而不是保持前一个响应的缓冲。

在面试中我们经常会被问到post与get的区别，我总结出以下几点：

• get参数通过url传递，post放在request body中。

• get请求在url中传递的参数是有长度限制的，而post没有。

• get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

• get请求只能进行url编码，而post支持多种编码方式

• get请求会浏览器主动cache，而post支持多种编码方式。

• get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
• GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

• GET产生一个TCP数据包；POST产生两个TCP数据包。

长的说：
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

url

对于url来说，分为两种情况：
一种是直接把后台的接口地址写进去就可以，一种是需要我们进行拼接。

datatype的数据格式：

• "xml": 返回 XML 文档，可用 jQuery 处理。
• "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
• "script": 返回纯文本 javascript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
• "json": 返回 JSON 数据 。
• "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
• "text": 返回纯文本字符串

ajax实现的五个步骤（面试）：

1. 创建XMLHttpRequest对象：
   var xmlHttp = new XMLHttpRequest();
2. 注册回调函数:

       if (xmlHttp.readyState == 4)
            if (xmlHttp.status == 200) 
               var responseText = xmlHttp.responseText;

           

1. 配置请求信息，open(),get

//get请求下参数加在url后:.ashx?methodName = GetAllComment&str1=str1&str2=str2
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);

post请求下需要配置请求头信息:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

1. 发送请求,post请求下，要传递的参数放这
   xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");

2. 根据不同的响应进行处理

function callback1() 
    if (xmlHttp.readyState == 4)
        if (xmlHttp.status == 200) 
            //取得返回的数据
            var data = xmlHttp.responseText;
            //json字符串转为json格式
            data = eval(data);
            $.each(data,
                function (i, v) 
                    alert(v);
                );