AJAX基础知识学习

什么是AJAX

AJAX：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML
是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax：只刷新局部页面的技术
* JavaScript：更新局部的网页
* XML：一般用于请求数据和响应数据的封装
* XMLHttpRequest对象：发送请求到服务器并获得返回结果
* CSS：美化页面样式
* 异步：发送请求后不等返回结果，由回调函数处理结果

AJAX的应用：

1. google搜索框中，点击搜索会提前出来搜索内容
2. qq邮箱中，输入邮箱的时候，会出现一些邮箱提示

XMLHttpRequest

1. 现在的所有浏览器都支持XMLHttpRequest对象，XMLHttpRequest用于在后台与服务器交换数据。
2. 创建XMLHttpRequest语法：
   • xmlhttpequest = new XMLHttpRequest();
   • 老版的IE5和IE6的创建方式：xmlhttprequest = new ActiveXObject(“Microsoft.XMLHTTP”);
   • 代码：

  window.onload = function(){
  	var xmlhttprequest;
  	//如果浏览器有，就创建
  	if(window.XMLHttpRequest()){
  		xmlhttprequest = new XMLHttpRequest();
  	}else{//如果没有就创建另一种形式
  		xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
  	}
  	alert(xmlhttprequest);
  }

3. 方法：
   • open(method,URL,async) 建立与服务器的连接
     • method参数指定请求的HTTP方法,典型的值是GET或POST
     • URL参数指请求的地址
     • async参数指定是否使用异步请求，其值为true或false
   • send(content) 发送请求
     • content参数指定请求的参数
   • setRequestHeader(header,value) 设置请求的头信息
4. 属性：

   • onreadystatechange：指定回调函数

   • readyState: XMLHttpRequest的状态信息

     • 就绪状态码 说 明
       0 XMLHttpRequest对象没有完成初始化
       即：刚刚创建。
       1 XMLHttpRequest对象开始发送请求
       调用了open方法，但还没有调用send方法。请求还没有发出
       2 XMLHttpRequest对象的请求发送完成
       send方法已经调用，数据已经提交到服务器，但没有任何响应
       3 XMLHttpRequest对象开始读取响应，还没有结束
       收到了所有的响应消息头，但正文还没有完全收到
       4 XMLHttpRequest对象读取响应结束
       一切都收到了

   • status：HTTP的状态码
     状态码 说 明
     200 服务器响应正常
     400 无法找到请求的资源
     403 没有访问权限
     404 访问的资源不存在
     500 服务器内部错误

   • responseText：获得响应的文本内容

   • responseXML：获得响应的XML文档对象 documednt
     代码：
     myjs.js

function getXMLHttpRequest(){
   	var xmlhttprequest;
  	if(window.XMLHttpRequest()){
  		xmlhttprequest = new XMLHttpRequest();
  	}else{
  		xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
  	}
  	//alert(xmlhttprequest);
  	return xmlhttprequest;
  }

//1.获取XMLHttpRequest对象
  	var req = getXMLHttpRequest();
  	//alert(req);
  	//4.处理响应结果
  	req.onreadystatechange = function(){
  	//alert(req.readyState);
  	if(req.readyState == 4){
  		//alert(req.status);
  		if(req.status == 200){//服务器响应一切正常/
  			alert(req.responseText);
  		}
  	}
  	
  	}
  	//2.建立连接
  	req.open("get","${pageContext.request.contextPath }/servlet/servletDemo1");
  	//3.发送请求
  	req.send(null);

使用JQuery实现

1. $.ajax()
   • 语法：$.ajax({键值对});

					//使用$.ajax()发送异步请求
		           $.ajax({
		                url:"ajaxServlet1111" , // 请求路径
		                type:"POST" , //请求方式
		                //data: "username=jack&age=23",//请求参数
		                data:{"username":"jack","age":23},
		                success:function (data) {
		                    alert(data);
		                },//响应成功后的回调函数
		                error:function () {
		                    alert("出错啦...")
		                },//表示如果请求响应出现错误，会执行的回调函数
		
		                dataType:"text"//设置接受到的响应数据的格式
		            });

2. $.get()：发送get请求

   • 语法：$.get(url, [data], [callback], [type])
   • 参数：
     • url：请求路径
     • data：请求参数
     • callback：回调函数
     • type：响应结果的类型

3. $.post()：发送post请求

   • 语法：$.post(url, [data], [callback], [type])
     • 参数：
       • url：请求路径
       • data：请求参数
       • callback：回调函数
       • type：响应结果的类型