前言

这篇讲解前后端请求，包括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);
                });       
        }
}