前言

这篇讲解前后端请求,包括ajax请求参数和封装ajax以及后台如何接收一系列过程

一、dataType和contentType区别

  • contentType 告诉服务器,我要发什么类型的数据
  • 告诉服务器,我要想什么类型的数据,如果没有指定,那么会自动推断是返回 XML,还是JSON,还是script,还是String。

二、contentType

2.1、定义

前端数据发送到服务器,默认application/x-www-form-urlencoded。特点:name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。

  • application/x-www-form-urlencoded,
  • multipart/form-data,
  • application/json,
  • text/plain

2.2、实例

简单的JSON

{
     a: 1,
     b: 2,
     c: 3
}

复杂的JSON:对象嵌数组,数组中包括对象

{
   data: {
     a: [{
       x: 2
     }]
   }
}

这个复杂对象, application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式,你传进去可以发送请求,但是服务端收到数据为空
那这么办
新定义一种类型:application/json,这种类型是 text
复杂JSON数据-->JSON.stringify序列化-->发送-->服务器端JSON.parse 进行还原

三、dataType

3.1、定义

dataType 服务器返回的数据类型。如果未指定任何内容,则jQuery将尝试根据响应的MIME类型进行推断。

  • text 不会经过处理
  • xml 不会经过处理
  • html HTML作为一个字符串返回之前执行
  • script 脚本作为一个文本数据返回
  • json 作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回
  • jsonp

四、ajax请求步骤

4.1、创建XMLHttpRequest异步对象

var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }

4.2、注册回调函数

xmlHttp.onreadystatechange =callback1;

4.3 配置请求信息,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");

4.4、发送请求,post请求下,要传递的参数放这。

xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"

4.5、创建回调函数

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);
                });       
        }
}