jQuery实现ajax请求

在没学习jQuery之前,发送ajax是比较麻烦的一个过程,需要四个步骤,jQuery将这些个步骤简化了,使用起来更加方便快捷

相关函数

  1. $.ajax() : 它是jQuery中实现ajax的核心函数
  2. $.post() : 这个函数是使用post方式发送ajax请求
  3. $.get() : 这个函数是使用get的方式发送ajax请求

$.post() 和 $.get() 它们都是在内部调用了 $.ajax() ,所以 $.ajax() 是核心函数

$.ajax() 的使用

这个函数的参数表示请求的url, 请求的方式, 参数值等信息
$.ajax() 它的参数是一个json结构
例如:

  1. $.ajax({
  2.         名称1 : 值1,
  3.         名称2 : 值2,
  4.         ...
  5.     })

json结构的参数说明

key value
async 是boolean类型的,默认是true, 代表异步请求,可省略, 和原生ajax函数,xmlhttp.open(get, url, true)中第三个参数表示的思想一样
contentType 字符串,表示从浏览器发送给服务器的参数的类型,可以省略;例如请求的参数是json,可以写application/json
data(常用) 可以是字符串,数组,json;是用来表示请求的参数值的;常用的是json格式的数据,例如:{name : “张三”, age : 20}
dataType(常用) 表示期望从服务器端返回的数据格式, 可选择的有: xml, html, text, json等;当我们使用$.ajax()发送请求时,会把dataType的值传给服务器,那么服务器就能够读取到dataType的值,从而知道需要返回的数据格式
error function类型;表示当发生错误时执行的函数
success(常用) function类型;表示请求成功时执行的函数;相当于原生ajax中XMLHttpRequest对象,当readyState= =4 &&status== 200时执行的代码
url(必传) 请求的地址
type(常用) 请求方式, get,post等,不用区分大小写,默认是get方式

具体例子:

  1.     $.ajax({
  2.         asycn : true,
  3.         contentType : "application/json",
  4.         data : {
  5.             name : "zhangsan",
  6.             age : 20
  7.         },
  8.         dataType : "json",
  9.         error : function() {
  10.             // 出现错误
  11.             alert("请求错误");
  12.         },
  13.         success : function(data) {
  14.             // data 就是responseText返回的数据,但是这里是jQuery处理完成之后的数据
  15.             alert("请求成功, data为" + data);
  16.         },
  17.         url : "xxxx/xxx",
  18.         type : "get"
  19.     })