ajax基础用法

AJAX——–异步交互

• 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做别的事情；

• 使用ajax可以在不刷新页面的情况下与服务器进行交互从而更新页面内容； 创建ajax四个步骤：

• 创建XMLHttpRequest对象

• 注册监听
• 建立连接
• 发送请求

原生js创建ajax (get方式)(实际使用中建议用jQuery创建ajax)

function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200{
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
xmlhttp.open("GET",url);
xmlhttp.send();
}

jQuery创建ajax(详细)

• get与post在使用中的区别:
  get请求类型
  send()方法不起作用,但是不能被省略
  请求参数 - 添加到URL?key=value
• POST请求类型
  send()方法起作用
  在send()方法被调用前,使用setRequestHeader()方法设置请求头信息

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

• $.ajax() 封装第一层，最复杂；

$.ajax({
url:"", 
type:"",
data:{key:value},
dataType:"json",
success:function(data,textStatus){},
error:function(XMLHttpRequest,textStatus,errorThrown){}
})

以上为常用参数，各参数意义分别为
{* url - 请求参数//
- type - 请求类型(默认get)//
- data - 请求数据(key:value形式)//
- dataType - 响应数据格式(一般为json,html,xml格式, 跨域改为jsonp)//
- success - 请求成功后的回调函数(响应数据内容, 请求状态)//
- error - 请求失败后的回调函数(Ajax核心对象, 请求状态(error,timeout,notmodified等), 抛出异常)
}

• $().load()$.get() $.post() 封装第二层,(后两个常用)；

  $().load(url,data,callback){} 
  

• 参数
  url - 当前Ajax的请求地址
  data - 当前Ajax的请求数据(key:value)
  callback - 请求成功后的回调函数( 形参(data) -服务器端响应的数据内容 )

 $.get(url,data,callback,type) 

• 参数
  url - Ajax的请求地址
  data - Ajax的请求数据((key:value))
  callback - Ajax请求成功后的回调函数( 形参(data) -服务器端响应的数据内容 )

• type - 设置服务器端响应数据的格式
  HTML格式 (默认)
  xml - XML格式
  json - JSON格式 (一般常用)

• $.post() - 请求类型是POST(使用方式与$.get()方法一致)

• $.getScript()$.getJSON() 封装第三层 (特殊用法)

$.getScript(url,callback) 

• 动态读取脚本(JavaScript代码)
  url - 读取脚本的地址(本地或服务器)
  callback - 读取成功后的回调函数
  $.getJSON() - 接收JSON格式数据(用于跨域)

楼主目前还是新手，文章有什么不足或者需要改进的地方，希望大家留言提出。希望这篇文章对大家有用。