总结：使用Ajax让我们页面获得数据

edison
207 阅读3分钟

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

什么是Ajax和JSON，它们的优点

  • Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新
  • 优点：可以实现异步通信效果，页面局部刷新，带来更好的用户体验
  • JSON是一种轻量级的数据交换格式，看着像对象，本质是字符串
  • 优点：轻量级、易于人的阅读和编写，便于js解析，支持复合数据类型

Ajax的交互流程有哪几步？

  • 创建ajax对象
    • xhr = new XMLHttpRequest
  • 规定请求地址
    • xhr.open(method,url,async)
  • 等待服务器相应
    • xhr.onload
  • 向服务器发送请求
    • xhr.send()

下面是一个验证用户名的ajax例子

username.onblur = function(){
var usernameValue = username.value;
//将usernameValue提交给服务器，有服务器进行唯一性的校验
//1、创建对象 兼容处理
var xhr = null;
if(window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
} else {
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//2、准备发送
	xhr.open("get","./server/checkUsername.php?uname=" + usernameValue,true);
	//3、执行发送
	xhr.send(null);
	//制定回调函数
	xhr.onreadystatechange = function(){
	if(xhr.readyState == 4) {
	if(xhr.status == 200) {
		var result = xhr.responseText;
	var username_result = document.querySelector("#username_result");
	if(result == "ok") {
	username_result.innerText = "用户名可以使用";
} else {
		username_result.innerText = "用户名已经被注册";
		 }
	  }
     }
};

XMLHttpRequest对象在IE和Firefox中创建方式有没有不同？

IE中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到. 使用jquery封装好的ajax，会避免这些问题

简述ajax的优缺点

优点： 　　
  • 无刷新更新数据（在不刷新整个页面的情况下维持与服务器通信） 　　
  • 异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作） 　　
  • 前端和后端负载均衡（将一些后端的工作交给前端，减少服务器与宽度的负担） 　　
  • 界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离） 　　
  • 缺点： 　　
  • ajax不支持浏览器back按钮 　　
  • 安全问题 Aajax暴露了与服务器交互的细节 　　
  • 对搜索引擎的支持比较弱 　　
  • 破坏了Back与History后退按钮的正常行为等浏览器机制

    XMLHttpRequest常用方法和属性

    open(get/post,url,是否异步)创建http请求

    send()发送请求给服务器

    setRequestHeader()设置头信息（使用post才会用到，get并不需要调用该方法）

    常用的属性：

    onreadystatechange 用于监听ajax的工作状态（readyState变化时会调用此方法）

    readyState 用来存放XMLHttpRequest的状态

    status 服务器返回的状态码

    responseText 服务器返回的文本内容

    readyState的几个状态

    0：请求未初始化（此时还没有调用open）

    1：服务器连接已建立，已经发送请求开始监听

    2：请求已接收，已经收到服务器返回的内容

    3：请求处理中，解析服务器响应内容

    4：请求已完成，且响应就绪

    jquery ajax的实现

    $.ajax({
     url:发送请求的地址,
     data:数据的拼接,//发送到服务器的数据
     type:'get',//请求方式，默认get请求
     dataType:'json',//服务器返回的数据类型
     async:true,//是否异步，默认true
     cache:false,//设置为 false 将不会从浏览器缓存中加载请求信息
     success:function(){},//请求成功后的回调函数
     error: function(){}//请求失败时调用此函数
})
    • avatar
    文章
    阅读
    粉丝