黑马程序员技术交流社区

标题: 6.6ajax笔记 [打印本页]

作者: yby 时间: 2019-6-6 08:41
标题: 6.6ajax笔记
创建异步对象
语法：var xhr = new XMLHttpRequest();

open设置请求行
语法：异步对象.open(请求方式，请求url);
例：xhr.open("get","validate.php?username="+name);
xhr.open("post","validate.php");
注：1.get请求如果有参数就需要在url后面拼接参数，
         2.post如果有参数，就在请求体中传递

设置请求头
语法:异步对象.setRequestHeader('key':'value')
例： xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
注：1.get方式不需要设置请求头
         2.post需要设置 Content-Type:application/x-www-form-urlencoded
3.  返回值为xml需要这样设置header("Content-Type:application/xml;charset=utf-8");

send设置请求体:发送请求
语法：异步对象.send(参数：key=value&key=value)
例：xhr.send("num="+arr);
注：1.如果有参数，post应该在这个位置来传递参数
         2.对于 get请求不需要在这个位置来传递参数

响应报文
报文行：响应状态码响应状态信息  200 ok
报文头：服务器返回给客户端的一些额外信息
报文体：服务器返回给客户端的数据
注：1.responseText:普通字符串。
         2.responseXML：符合xml格式的字符串。

获得返回数据
语法1.异步对象.responseText  //普通字符串。
         2.异步对象.responseXML  //符合xml格式的字符串。

status:获取当前服务器的响应状态
语法：异步对象.status
注：1. 如果返回值为200表示响应成功。

监听异步对象的响应状态 readyState
注：1. 0表示创建了异步对象，但是还没有真正的去发送请求
2. 1表示调用了send方法，正在发送请求
3. 2表示send方法执行完毕了，已经收到服务器的响应内容--原始内容，还不可以使用
4. 3表示正在解析数据
5. 4表示响应内容解析完毕，可以使用了

常见异步事件
1.onreadystatechange  //表示异步对象发生改变
例：异步对象.onreadystatechange = function(){ }

ajax基本步骤
1.创建异步对象。  //var xhr = new XMLHttpRequest();
2.设置请求行。  // xhr.open("post", "demo02.php");
3.设置请求头。
//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
4.设置请求体。 // xhr.send("num1=" + arr1 + '&' + "num2=" + arr2);
5.判断服务器响应是否完成

ajax的基本代码模式（get请求）：
var xhr = new XMLHttpRequest();
//url通常就是一个php文件，可以返回信息
var url = "server.php?name=jack&age=18&a=99&b=ccc";
xhr.open("get", url);
xhr.send(null);
xhr.onreadystatechange = function(){
      if( xhr.status == 200 && xhr.readyState == 4){
         var str = xhr.responseText; //获得返回的文本
      }
}

ajax的基本代码模式（post请求）：
var xhr = new XMLHttpRequest();
//url通常就是一个php文件，可以返回信息
xhr.open("post", "server.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=jack&age=18&a=99&b=ccc"); //send中带数据
xhr.onreadystatechange = function(){
      if( xhr.status == 200 && xhr.readyState == 4){
         var str = xhr.responseText; //获得返回的文本
      }
}

获取json数据格式并处理的方式：
if( xhr.status == 200 && xhr.readyState == 4){
         var str = xhr.responseText; //获得返回的文本（假设是json文本）
         var obj = JSON.parse(str);  //将json文本解释为json对象
}

获取xml数据格式并处理的方式：
//服务器端：
      header("Content-Type: application/xml; charset=utf-8");

//客户端：
if( xhr.status == 200 && xhr.readyState == 4){
         var xmlObj = xhr.responseXML; //获得返回xml文档
         var obj1 = xmlObj.getElementById("dv");
         var obj2 = xmlObj.querySelector("#dv2");
         var items = xmlObj.querySelectorAll("item");
}

serialize()获取所有表单元素值
语法：$("form表单").serialize();
例：$("#ajaxForm").serialize();
注：1.这个方法是jq的方式，所以需要使用jq对象来调用
      2.这个方法可以将表单中所有name属性的表单元素的值收集，生成 key=value&key=value...这种格式

获取当前文件的路径
语法：Location.href

jQuery中的Ajax

发起Ajax请求
语法：$.ajax({})

以GET方式发起Ajax请求
语法：$.get()

以POST方式发起Ajax请求
语法：$.post()

url接口地址
语法：url:'./server/nav-json.php',

type请求方式
语法：type:'post',

timeout请求超时
语法：timeout:3000,
注：1.设置请求超时:单位为毫秒，如果服务器的响应时间超过指定的时候，请求失败。

ontimeout 监听超时事件
语法：异步对象.ontimeout=function(e){ }

dataType服务器返回格式
语法：dataType:'json',
注：1.设置响应数据的格式  xml json text html script jsonp。

data发送请求数据
语法：data:{},
注1.请求需要传递的参数。

beforeSend:function () {}请求发起前调用
语法：beforeSend:function () {}

success成功响应后调用
语法： success:function(e){},

error错误响应时调用
语法：error:function(){ }
例： error:function(e){
   if(e.statusText == "timeout"){
alert("请求超时，请重试");
         }
      },

complete 响应完成时调用（包括成功和失败）
语法：complete:function(){ }
例：complete:function(){
         console.log('实现一些全局成员的释放，或者页面状态的重置....');
      }

jQuery Ajax介绍

http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

art-Template模板引擎
1.创建html结构
语法：<script type="text/template" id="navtemp">结构<script>

2.引入插件
例：<script src="template-native.js"></script>

3.接收模板引擎的返回值
语法：template(模板id,数据(对象));
例：var html = template("navTemp",obj);
注：1.调用模板引擎中的函数，返回值为替换之后的动态结构

4.添加返回的数据到页面

模板引擎基本步骤

综合案例

跨域
设置跨域请求
1.header( 'Access-Control-Allow-Origin:*' );
注：1.*代表允许所有其他的域向当前的域发送ajax请求。
2.header( 'Access-Control-Allow-Origin:http://www.study.com');
注：1.代表允许指定域向当前的域发送ajax请求。

注：1.服务器端设置。

XMLHttpRequest2.0
设置超时 xhr.timeout
监听超时事件 xhr.ontimeout = function () {// code}

FormData收集表单数据
实例化：var formdata=new FormData(form表单对象)

监听文件上传进度
语法：xhr.upload.onprogress = function (ev) {// code}

注：1.监听必须在send之前来设置。
2.ev.loaded 表示已上传的大小，ev.total表示文件整体的大小

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2