A jornada mental de aprender o front-end web ------ Conhecimento relacionado a Ajax e Json

Ajax

1. Conceito

  Ajax é Asynchronous Javascript And XML (Asynchronous JavaScript and XML), que usa JavaScript para fazer uma solicitação ao servidor e processar a resposta sem bloquear o objeto central do usuário XMLHttpRequest. Através deste objeto, seu JavaScript pode trocar dados com o servidor web sem recarregar a página, ou seja, um efeito de atualização parcial pode ser produzido sem a necessidade de atualizar a página . Ajax usa transferência de dados assíncrona (solicitações HTTP) entre o navegador e o servidor web , o que permite que as páginas web solicitem pequenas quantidades de informações do servidor ao invés de toda a página.

2. Aplicação

  1) Use XHTML+CSS para expressar informações;

  2) Usar JavaScript para operar DOM (Document Object Model) para realizar efeitos dinâmicos;

  3) Usar XML e XSLT para manipular dados;

  4) Use XMLHttpRequest ou a nova API Fetch para trocar dados de forma assíncrona com o servidor web;

• Nota: O AJAX é diferenciado das tecnologias RIA, como Flash, Silverlight e Java Applets.

3. Recursos

  Os dados podem ser mantidos sem atualizar a página inteira. Isso torna os aplicativos da Web mais responsivos às ações do usuário e evita o envio de mensagens inalteradas pela rede.

  Nenhum plug-in do navegador é necessário, mas o usuário deve permitir que o JavaScript seja executado no navegador.

4. Sincronizar

princípio

  Quando o navegador envia uma solicitação síncrona ao servidor, o navegador fica em estado de espera enquanto o serviço processa a solicitação síncrona. Após o servidor processar a solicitação, ele responderá com dados ao navegador e substituirá os dados originais no memória do navegador O navegador—— Recarregue a página e exiba os dados de resposta do servidor.
A sincronização refere-se ao método de comunicação no qual o remetente envia dados e espera que o destinatário envie de volta uma resposta antes de enviar o próximo pacote de dados.

Do ponto de vista do usuário, as duas maneirasA diferençadentro:

  Síncrono - O consumidor invoca o serviço por meio de um único thread; o thread envia a solicitação, bloqueia enquanto o serviço está em execução e aguarda a resposta. ( O cliente deve aguardar a resposta do servidor. O cliente não pode fazer mais nada enquanto espera. )
  Assíncrono - o consumidor invoca o serviço por meio de duas threads; uma thread envia a solicitação e uma thread separada recebe a resposta. ( O cliente não precisa esperar pela resposta do servidor. Enquanto o servidor está processando a solicitação, o cliente pode realizar outras operações )

	// JQeury实现方式
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：响应结果的类型

Json

1. Conceito

  JSON: JavaScript Object Notation; JSON é uma sintaxe para armazenar e trocar dados; JSON é texto escrito em JavaScript Object Notation,É um formato de intercâmbio de dados leve, JSON é menor, mais rápido e mais fácil de analisar do que XML。

2. Sintaxe:

1. 基本规则
	* 数据在名称/值对中：json数据是由键值对构成的
	 * 键用引号(单双都行)引起来，也可以不使用引号
	 * 值得取值类型：
		1. 数字（整数或浮点数）
		2. 字符串（在双引号中）
		3. 逻辑值（true 或 false）
		4. 数组（在方括号中）	{"persons":[{},{}]}
		5. 对象（在花括号中） {"address":{"province"："陕西"....}}
		6. null
	* 数据由逗号分隔：多个键值对由逗号分隔
	* 花括号保存对象：使用{}定义json 格式
	* 方括号保存数组：[]
2. 获取数据:
	1. json对象.键名
	2. json对象["键名"]
	3. 数组对象[索引]
	4. 遍历

 //1.定义基本格式
  var person = {
    
    "name": "张三", age: 23, 'gender': true};
  var ps = [{
    
    "name": "张三", "age": 23, "gender": true},
		    {
    
    "name": "李四", "age": 24, "gender": true},
		    {
    
    "name": "王五", "age": 25, "gender": false}];