Ajax详解

Ajax不仅仅可以解决不同页面传输值的问题：比如a.html想获取b.html页面的值 ,  怎么传送嘞？如果值比较少还好，可以将值保存在cookie中，值比较多的情况下用Ajax进行异步传输简直不要太爽；最关键的是：可以运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；

所谓异步传输就是：js程序执行到这一步的时候，可以不用等待值传输完毕再执行下面的程序，而是一边传输一边继续执行下一步；

使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作

1，那么ajax怎么和服务器通讯嘞？
步骤1：创建ajax对象：

var  XMLhttp=new XMLhttpRequest();

步骤2：连接服务器上的目标文件：

XMLhttp.open("GET","b.html","true");

method:get/post,  目标文件地址：b.html, 异步传输(async)？true/false;

步骤3：发送请求：
XMLhttp.send()

注意：1,用get发送请求需要再url中添加传送信息：b.html?name=bob&age=12;

用post发送请求需要添加头，及send中添加传送信息：

XMLhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("name=Henry&age=12);

2,关于async:若XMLhttprequest是Ajax则必须为true;  

async=true的时候代码格式：

var XMLhttp=new  XMLHttpRequest();     //readystate=0;

XMLhttp.open("get","b.html", "true");    //执行到这一步骤时，readystate=1;

XMLhttp.onreadystatechange=function(){ 

if(XMLhttp.readystate==4&&XMLhttp.status==200){

alert("hello"); }}

XMLhttp.send();        //执行到这一步readystate=2;

若你不想进行异步请求（一定要等待服务器响应请求，将数据返回才执行下面的程序：

async=false;则服务器若一直未请求成功，后面的程序无法执行将被挂起；

var XMLHttp=new  XMLHttpRequest();

XMLHttp.open("get","b.html", "false");

XMLHttp.send();

3，关于response的数据类型：

$("input").val(XMLHttp.responseText); //若来自服务器的响应数据不是XML，使用responseText；

若是xml则使用responseXML，并且解析xml数据:

var xmldata=XMLHttp.responseXML;

var  data=xmldata.getElementsByTagName("ARTIST");

var txt="";

for(var i=0;i<data.length;i++){

  txt=txt+data[i].childNodes[0].nodeValue;

}

$("input").val(txt);

4，实例：

请求页面发送出去请求，肯定得加一些约束条件，被请求页面才好知道它要什么：

var  val=$("input").val();

xmlhttp.open("get",  "b.html?q="+val  ,  "true");

对于服务器上的php页面：

$val=$_get[ 'val' ];

$array[ ]="amy";

$array[ ]="bob";

$array[ ]="cili";

if(strlen($val)>0){

for($i=0;$i<count($array);$i++){

if(tolowercase($val)==tolowercase(substring($array[$i], 0, strlen($val)))){

if ( $data==' '){

$data=$array[$i];

}else{

$data=$data.",".$arraya[$i];

}  }

if ( $data==' '){

return  "no ";

}else{

return  $data;

}

5，以上是原生js的ajax实例：下面是jquery的ajax()方法；

$.ajax({

url:   'new.php',

string:  'get',   //get，post，delete,,,,,,

timeout:   20s,    //超时时间

async:  true,         //异步同步

cache:  true,        //是否缓存cache

success:    function(data){

console.log("response success: ", data);   //发送成功

},

error:function(error){

alert("response error: ", error);      //发送失败

}

})

 

6，实例：php向html页面传送一个hello, html页面当点击按钮时接收到数据，并显示在div中；

test.php:

<?php

  echo   'hello';

?>

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

html页面：

<button   id="btn">点击</button>

<div id="show"></div>

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

<script>

 $(document.ready(function(){

$("#btn").click(function(){
$.ajax({

   'url': 'test.php',

 'dataType': 'json' ,

  'success' :  function(data1){

$("#show").html(data1);

}

});

});

})

</script>

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