Ajax

在开始之前 我先看了两个方法

$(" ").serialize()     //表示 创建一个标准的URL编码格式的文本字符串 他操作的对象是表单的集合

$(" ").serializeArray()    //通过序列化表单创建数组对象 返回的值是json对象 而非json字符串

-----------------------------------------------------------------------------------------------------------------------------------------

首先使用ajax开发最原始的方法有下面四个步骤:

1... 先创建一个XMLHttpRequest对象

var xhr = XMLHttpRequest(); //new 一个对象

2...使用open()方法

在这里有三个常用的参数  1 . 第一个为字符串 请求服务器的方式  post /get   

                                               2. 第二个为URL地址 表示的是请求服务器的地址

       3.第三个为一个布尔值表示的是 是否唯异步执行 true/false

xhr.open("POST","URL",true);

3.相应回调函数 返回的状态

xhr.onreadystatechange=function(){

if(xhr.readstate ==4&&xhr.status==200){     //首先 xhr.readstate 返回的有物种状态 0  1  2  3  4  按顺序执行 到4 表示成功 而xhr.status表示联通成功

alert( " xhr.responseText") //表示服务器返回来的字符串    ///xhr.responseXML 表示 服务器返回来的XML格式的文件

}

}

4. 调用send()方法

 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //如果请求服务器的方式为POST的话 需要添加 这句话

xhr.send() //参数可有可无       如果请求服务器的方式为GET的话 可以没有参数

  如果请求服务器的方式为POST的话要传送到服务器数据   但在第四步前面加 解析  

xhr.send(name=liujianhong&password=123);

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

2 简易版

<script type="text/javascript">

var did = 6; //创建一个变量

$.ajax({                       // jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需        直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

type:"post", //请求的类型  GET /POST
url:"personJson.do", //请求的路径 URL
data: "did="+did, //发送到服务器的数据
async:true, //判断是否为异步
success: function(data){ //回调函数
var ps = eval(data);
var node = "";
for(var i = 0; i < ps.length; i++) {
//json就是已经是个javascirpt的对象了，可以直接使用
node += ps[i].id + "--------" + ps[i].name + "--------" +ps[i].age + "<br/>";
}

}
});

</script>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

3 精简版  最常用的方式

<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>       // 都是依赖jQuery的 架包

<script type="text/javascript">

function getData(node){     //建一个 getDate函数

var Uri = "personJson.do";      // 声明  URL路径  

/// $.post(有四个参数 )  

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.post(Uri,$("select").serializeArray(),function(data){  
var str = " ";
for(var i=0;i<data.length; i++){
var person = data[i];
str += person.id + "-------"+person.name+"-------"+person.age;
}

alert(str);

},"json");

}
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

******************解决跨不同的入武器或者不同的程序 请求资源*********************************

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$.ajax({
type:"post",

url:"http://127.0.0.1:8080/jsonp02/json.do",
async:true,
data:"did=1",
dataType:"jsonp",
success:function(data){
alert(data.id+"-----"+data.name);
}
});

</script>

或者

$.ajax({
    async:false,  // 判断是否异步
    

    url: http: //跨域的dns/document!searchJSONResult.action,

    type: "GET",

    dataType: 'jsonp', //请求数据类型 

    jsonp: 'jsoncallback',

    data: qsData,

    timeout: 5000, //设置请求超时

    beforeSend: function(){
        //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
    },

    success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
        if(json.actionErrors.length!=0){
            alert(json.actionErrors);
        }
        genDynamicContent(qsData,type,json);
    },

    complete: function(XMLHttpRequest, textStatus){
        $.unblockUI({ fadeOut: 10 });
    },

    error: function(xhr){
        //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
        //请求出错处理
        alert("请求出错(请检查相关度网络状况.)");
    }
});

------------------------------------------------------------------------------------

$ ( ).load()  //从服务器加载数据然后返回到HTML放入到匹配的标签中

$("#content").load("http://127.0.0.1:8080/jsonp02/a.html");