jQuery Ajax

这一阵子做了一个毕设的基础版，包括了定位-发送至后端数据库存储-退出页面时删除存储在数据库中的数据。前面的基础已经能够完成定位和发送到后端的部分了，但是退出页面执行操作就遇到了困难，网上很多说使用onbeforeunload事件监听，按照我一开始的思路，采用这个方法，在关闭页面时跳转到一个jsp页面进行处理，这样是行不通的，页面都关闭了，这个跳转自然也是打不开的，所以查了很多资料，最后发现ajax可以实现这个效果。

Ajax简介

多的也不说了，反正百度都能搜到，我个人的理解Ajax就是一个能让静态页面一部分动起来的技术。传统的html一般加载完成后，就和后端没有什么联系了，这时候就算断网也没影响，除非要加载到另一个页面，一般来说要将请求送到后端的服务器，都需要利用链接，跳转过去，最直观的表现就是地址栏会发生变化，即使在处理页面马上又跳转了回来，这个地址的变化是不可避免的，而采用ajax技术之后，可以在不刷新全部静态页面的情况下实现和服务器的沟通，最常见的例子就是搜索栏，当我们打上几个字之后，下面显示出来的提示输入，就是利用了ajax技术，这时我们并没有进行页面的跳转，但是缺从后端的数据库中得到了我们可能要输入的信息的提示，这就是李永乐ajax的xmlhttprequest对象，是这个对象和服务器进行了交流，传回了我们需要的信息。

在这里插入图片描述

ajax基本语法

前面提到了ajax里面的最核心的xmlhttprequest对象，在使用ajax的时候，第一步就是获取这个对象，由于不同浏览器的配置不同，获取时需要进行判断，这就和使用IndexedDB时先判断浏览器型号是一个道理，采用下面的代码，就可以初始化一个xmlhttprequest对象，这里IE出来背锅。

HTTP_Request = false;
if (window.XMLHttpRequest) {    							   // 非IE浏览器
	HTTP_Request = new XMLHttpRequest();	                      //创建XMLHttpRequest对象
} else if (window.ActiveXObject) {     						   // IE浏览器
    try {
      HTTP_Request = new ActiveXObject("Msxml2.XMLHTTP");	   //创建XMLHttpRequest对象
    } catch (e) {
      try {
        HTTP_Request = new ActiveXObject("Microsoft.XMLHTTP");  //创建XMLHttpRequest对象
      } catch (e) {}
    }
  }
  if (!HTTP_Request) {
    alert("不能创建XMLHttpRequest对象实例！");
    return false;
  }

得到xmlhttprequest对象之后就可以进行链接的建立了，建立需要使用open方法和send方法，参数如下：

在这里插入图片描述

建立连接使用open方法，这里的url要填写到达jsp文件的路径，最简单的方法就是找到这个jsp文件在服务器的访问位置，去掉域名的部分，要携带的数据也可以直接加在url里面，另外也可以作为string利用send发送，当类型设置为post的时候需要设置一下连接的头部，具体代码如下：

HTTP_Request.open('POST', url, true);
HTTP_Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var param = "lon="+lon.value+"&lat="+lat.value;
HTTP_Request.send(param);

至于选择哪种类型，要看需求。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在无法使用缓存文件、向服务器发送大量数据或者发送包含未知字符的用户输入时情况时，请使用 POST 请求。

除此之外，为了更好的响应ajax返回的数据，我们需要设置一下回调函数，这里就需要使用onreadystatechange事件，当请求被发送到服务器时，需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState 属性存有XMLHttpRequest的状态信息。这个状态码有很多，一般来说只要设置正确，连接的状态码是4，返回的状态码是200，这时就可以进行回调函数的执行。具体代码如下：

HTTP_Request.onreadystatechange = getResult;
function getResult() {
    if (HTTP_Request.readyState == 4) {     		// 判断请求状态
      if (HTTP_Request.status == 200) {     		// 请求成功，开始处理返回结果
        alert("测试成功");
        document.getElementById("toolTip").innerHTML=HTTP_Request.responseText;
        id=HTTP_Request.responseText;
      } else {     						// 请求页面有错误
        alert(HTTP_Request.status);
      }
    }
  }

在状态码等于200时，就可以根据需要编写jsp代码，这里我的需求是把返回值写在页面上并且存在一个变量里面，可以根据需要写其它的代码。

这只是前端插入的代码，在后端对应的位置也需要编写相应的jsp处理，这个处理可以用很多种方式写，本人只会jsp，所以就用jsp写的，这里不需要写太多内容，写处理的逻辑就好了，没有必要写body的内容。

jQuery与Ajax

不难发现我们要想插入一个ajax代码需要很长的篇幅，前面寒假里学的jQuery可以节约这个代码量，jQuery是一个jsp的函数库，所以利用现有的库，就可以大量节省代码量。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。这个方法主要有三个参数：必需的 URL 参数规定您希望加载的 URL，可选的 data 参数规定与请求一同发送的查询字符串键/值对集合，可选的 callback 参数是 load() 方法完成后所执行的函数名称。说白了这个方法就是把服务器的一个jsp的返回值加载到对象内部。

关于处理get和post则通过jquery变成里get和post方法， . g e t ( ) 方法通过 H T T P G E T 请求从服务器上请求数据。 .get() 方法通过 HTTP GET 请求从服务器上请求数据。 .get()方法通过HTTPGET请求从服务器上请求数据。.post() 方法通过 HTTP POST 请求从服务器上请求数据。

在这里插入图片描述

Ajax简介

ajax基本语法

jQuery与Ajax

相关推荐